select to unordered list

by tomsx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id ="mylist" multiple size="6">
          <option value="0">First</option>
          <option value="1">Second</option>
          <option value="2">Second</option>
          <option value="3">Third</option>
          <option value="4">Fourth</option>
          <option value="5">Fifth</option>
</select>

  
  <ul>
   <li><label for="chk1"><input type="checkbox" id="0">First</label></li>
   <li><label for="chk2"><input type="checkbox" id="1">Second</label></li>
   <li><label for="chk3"><input type="checkbox" id="2">Third</label></li>
   <li><label for="chk4"><input type="checkbox" id="3">Fourth</label></li>
   <li><label for="chk5"><input type="checkbox" id="4">Fifth</label></li>
   <li><label for="chk6"><input type="checkbox" id="5">Sixth</label></li>
  </ul>

CSS

select, ul { height: 100px; overflow: auto; width: 100px; border: 1px solid #000; }
   ul { list-style-type: none; margin: 0; padding: 0; overflow-x: hidden; }
   li { margin: 0; padding: 0; }
   label { display: block; color: WindowText; background-color: Window; margin: 0; padding: 0; width: 100%; }
   label:hover { background-color: Highlight; color: HighlightText; }

JavaScript

$(function(){
    var id = "mylist";
    $('#'+id).after("<ul id='mylist2' />")
        .children("option").each(function() {
            $("#mylist2").append("<li>"+$(this).text()+"</li>");
        })
        .end().remove();
    $('#mylist2').attr("id",id);
});