如何将 ul 和 li 转换为 select 和选项并保留课程？

Question

我想将带有类的 ul 和 li 转换为 select 和具有相同类的选项。

如果在控制台中我手动替换元素，则功能正常。

但是我找不到在 document.ready 上替换它的方法。 我尝试了 the.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>