使用带有选项的optgroups将选择框转换为使用jQuery

Question

我需要使用带有选项的optgroups将selectbox转换为使用jQuery的多级UL LI。

代码：

    <select id="" class="" name="">
  <optgroup label="Swedish Cars">
    <option value="2017">2017</option>
    <option value="2016">2016</option>
    <option value="2015">2015</option>
    <option value="2014">2014</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="2013">2013</option>
    <option value="2012">2012</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
  </optgroup>
</select>

我想将其更改为多级别。

My code

$(function() {
  select_box_main_id = $(".multi-select-box").attr("id");
  $('#' + select_box_main_id).after("<ul id='temp' class='multi_select_drop dropdown-menu'></div>")
    .children("optgroup").each(function() {
      $("#temp").append('<li><label class="">' + $(this).attr("label") + '</label></li>')
        .children("option").each(function() {
          $("#temp").after().append('<li><label class="checkbox"><input type="checkbox" class="check_multiselect" value="' + $(this).val() + '"/>' + $(this).text() + "</label></li>");
        })
    })
    .end().remove();
  $('#temp').attr({
    "id": select_box_main_id,
    "name": select_box_main_id
  });
});



$(document).ready(function() {
  $('.btn_multiselect').click(function() {
    $(this).parent(".btn-group").toggleClass("open_dropdown");
    //multi_select_txt = $(this).text();
  });
});

<script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
<select id="" class="" name="">
  <optgroup label="Swedish Cars">
    <option value="2017">2017</option>
    <option value="2016">2016</option>
    <option value="2015">2015</option>
    <option value="2014">2014</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="2013">2013</option>
    <option value="2012">2012</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
  </optgroup>
</select>




<select id="carfilter" class="multi-select-box" name="yearfilter">
  <optgroup label="Swedish Cars">
    <option value="2017">2017</option>
    <option value="2016">2016</option>
    <option value="2015">2015</option>
    <option value="2014">2014</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="2013">2013</option>
    <option value="2012">2012</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
  </optgroup>
</select>