select to unordered list

by tomsx

HTML

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

<div id="checkboxlist" class="container">
<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>
</select>
<div id="checkboxlist">

CSS

#checkboxlist select, ul {
     height: 100px;
     overflow: auto;
     width: 200px;
     border: 1px solid #000;
}
 
 #checkboxlist ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
}
  #checkboxlist li {
     margin: 0;
     padding: 0;
}
 #checkboxlist label {
     display: block;
     color: WindowText;
     background-color: Window;
     margin: 0;
     padding: 0;
     width: 100%;
     position: relative; 
}
 .container {
    height:100px;
    border-color:black;
    overflow:auto;
}

li {
    outline: none;
    cursor: default;
}
.active{
    background-color:yellow;    
}

JavaScript

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

$('div.container').on('keydown', 'li', function(e) {
    $this = $(this);
    console.log(this.value);
    if (e.keyCode == 40) {        
        $this.next().focus();
        return false;
    } else if (e.keyCode == 38) {        
        $this.prev().focus();
        return false;
    }
}).find('li').first().focus();

});