How can I convert a ul and li to select and options and keep the classes?

Question

I want to convert a ul and li with classes to select and option with the same classes.

If in the console I replace by hand the elements, the functions are working fine.

However I can not find a way to replace it on document.ready. I tried the .replaceWith but this does not keep the same classes and it is not working. Any suggestions?

<div class="convert_to_select">
    <ul class="my_filter_checkbox">
        <li>
            <label class="filter_checkbox_container">test1
                <input class="my-more-filter-vals" data-mfilterkey="testfilter" data-mfilterval="t1" type="checkbox" value="v1" name="my_extrafields_select[]">
                <span class="filter_checkbox_checkmark"></span>
            </label>
        </li>                                       
        <li>
            <label class="filter_checkbox_container">test2
                <input class="my-more-filter-vals" data-mfilterkey="testfilter" data-mfilterval="t2" type="checkbox" value="v2" name="my_extrafields_select[]">
                <span class="filter_checkbox_checkmark"></span>
            </label>
        </li>
    </ul>
</div>

I tried

$(".convert_to_select ul").replaceWith(function() {
 return "<select>" + this.innerHTML + "</select>"; 
});
$(".convert_to_select li").replaceWith(function() {
 return "<option>" + this.innerHTML + "</option>"; 
});

Answer 1

This is not the best solution, but it works.

You can upgrade it to keep classes or do whatever you want to do.

UPDATE :

What if there are multiple "div.convert_to_select" or just multiple "ul"?

$(document).ready(function(){
  var DivCount = $(".convert_to_select").length;
  var a = [];
  for (var i = 0; i < DivCount; i++){
    $(".convert_to_select:eq("+i+") li").each(function(){
      var x = $(this).text();
      a.push(x);
    });
    
   $(".convert_to_select:eq("+i+")").html("").append("<select class='finalResult_"+i+"'></select>");
   
   appendData(i)
     
  }
  
  function appendData(num){
  for(var i = 0; i < a.length; i++){
       $(".finalResult_"+num).append("<option value='"+a[i]+"'>"+a[i]+"</option>");
     }
  a = [];
  }
   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="convert_to_select">
    <ul class="my_filter_checkbox">
        <li>
            <label class="filter_checkbox_container">test1
                <input class="my-more-filter-vals" data-mfilterkey="testfilter" data-mfilterval="t1" type="checkbox" value="v1" name="my_extrafields_select[]">
                <span class="filter_checkbox_checkmark"></span>
            </label>
        </li>                                       
        <li>
            <label class="filter_checkbox_container">test2
                <input class="my-more-filter-vals" data-mfilterkey="testfilter" data-mfilterval="t2" type="checkbox" value="v2" name="my_extrafields_select[]">
                <span class="filter_checkbox_checkmark"></span>
            </label>
        </li>
    </ul>
</div>
<br><br>
<div class="convert_to_select">
    <ul class="my_filter_checkbox">
        <li>
            <label class="filter_checkbox_container">another one
                <input class="my-more-filter-vals" data-mfilterkey="testfilter" data-mfilterval="t1" type="checkbox" value="v1" name="my_extrafields_select[]">
                <span class="filter_checkbox_checkmark"></span>
            </label>
        </li>                                       
        <li>
            <label class="filter_checkbox_container">another one 2
                <input class="my-more-filter-vals" data-mfilterkey="testfilter" data-mfilterval="t2" type="checkbox" value="v2" name="my_extrafields_select[]">
                <span class="filter_checkbox_checkmark"></span>
            </label>
        </li>
        <li>
            <label class="filter_checkbox_container">another one 3
                <input class="my-more-filter-vals" data-mfilterkey="testfilter" data-mfilterval="t2" type="checkbox" value="v2" name="my_extrafields_select[]">
                <span class="filter_checkbox_checkmark"></span>
            </label>
        </li>
    </ul>
</div>
<br><br>
<div class="convert_to_select">
    <ul class="my_filter_checkbox">
        <li>
            <label class="filter_checkbox_container">just 4 test
                <input class="my-more-filter-vals" data-mfilterkey="testfilter" data-mfilterval="t1" type="checkbox" value="v1" name="my_extrafields_select[]">
                <span class="filter_checkbox_checkmark"></span>
            </label>
        </li>                                       
        <li>
            <label class="filter_checkbox_container">just 4 test 2
                <input class="my-more-filter-vals" data-mfilterkey="testfilter" data-mfilterval="t2" type="checkbox" value="v2" name="my_extrafields_select[]">
                <span class="filter_checkbox_checkmark"></span>
            </label>
        </li>
        <li>
            <label class="filter_checkbox_container">just 4 test 3
                <input class="my-more-filter-vals" data-mfilterkey="testfilter" data-mfilterval="t2" type="checkbox" value="v2" name="my_extrafields_select[]">
                <span class="filter_checkbox_checkmark"></span>
            </label>
        </li>
        <li>
            <label class="filter_checkbox_container">just 4 test 4
                <input class="my-more-filter-vals" data-mfilterkey="testfilter" data-mfilterval="t2" type="checkbox" value="v2" name="my_extrafields_select[]">
                <span class="filter_checkbox_checkmark"></span>
            </label>
        </li>
    </ul>
</div>