Как я могу преобразовать ul и li, чтобы выбрать и варианты и сохранить классы?

Question

Я хочу преобразовать ul и li с классами для выбора и option с теми же классами.

Если в консоли я вручную заменяю элементы, функции работают нормально.

Однако я не могу найти способ заменить его на document.ready. Я пробовал .replaceWith, но это не сохраняет те же классы, и он не работает. Есть предложения?

<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>

Я пробовал

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

Answer 1

Это не лучшее решение, но оно работает.

Вы можете обновить его, чтобы сохранить классы или делать все, что вы хотите.

ОБНОВЛЕНИЕ:

Что, если есть несколько «div.convert_to_select» или просто несколько «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>