使用 jQuery 将 ul li 转换为带有多选复选框的 select 下拉列表

Question

Could I somehow convert unordered list into dropdown list with multi select checkboxes? It's inside of some wordpress plugin, because of that I really wanna to do not lose attributes.

Here is example of html code:

 <ul data-rules="{&quot;Pepsi_0&quot;:[&quot;3&quot;],&quot;Pepsi Twist_1&quot;:[&quot;3&quot;],&quot;Mirinda_2&quot;:[&quot;3&quot;],&quot;7 up_3&quot;:[&quot;3&quot;],&quot;Mountain Dew_4&quot;:[&quot;3&quot;]}" data-original-rules="{&quot;Pepsi_0&quot;:[&quot;3&quot;],&quot;Pepsi Twist_1&quot;:[&quot;3&quot;],&quot;Mirinda_2&quot;:[&quot;3&quot;],&quot;7 up_3&quot;:[&quot;3&quot;],&quot;Mountain Dew_4&quot;:[&quot;3&quot;]}" data-rulestype="{&quot;Pepsi_0&quot;:[&quot;&quot;],&quot;Pepsi Twist_1&quot;:[&quot;&quot;],&quot;Mirinda_2&quot;:[&quot;&quot;],&quot;7 up_3&quot;:[&quot;&quot;],&quot;Mountain Dew_4&quot;:[&quot;&quot;]}" data-tm-validation="[]" class="tmcp-ul-wrap tmcp-elements tm-extra-product-options-checkbox tm-element-ul-checkbox element_1"> <li class="tmcp-field-wrap tmhexcolorimage-li-nowh tm-per-row"> <label for="tmcp_choice_1_0_2"> <input class="tmcp-field tmhexcolor_1_0_2 tm-epo-field tmcp-checkbox tcenabled" name="tmcp_checkbox_1_0" data-limit="1" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;3&quot;]" data-original-rules="[&quot;3&quot;]" data-rulestype="[&quot;&quot;]" value="Pepsi_0" id="tmcp_choice_1_0_2" tabindex="2" type="checkbox"> <span for="tmcp_choice_1_0_2"></span><span class="tc-label tm-label">Pepsi</span></label> <span class="price tc-price hidden"> <span class="amount">3.00lei</span> </span> </li> <li class="tmcp-field-wrap tmhexcolorimage-li-nowh tm-per-row"> <label for="tmcp_choice_1_1_3"> <input class="tmcp-field tmhexcolor_1_1_3 tm-epo-field tmcp-checkbox tcenabled" name="tmcp_checkbox_1_1" data-limit="1" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;3&quot;]" data-original-rules="[&quot;3&quot;]" data-rulestype="[&quot;&quot;]" value="Pepsi Twist_1" id="tmcp_choice_1_1_3" tabindex="3" type="checkbox"> <span for="tmcp_choice_1_1_3"></span><span class="tc-label tm-label">Pepsi Twist</span></label> <span class="price tc-price hidden"> <span class="amount">3.00lei</span> </span> </li> <li class="tmcp-field-wrap tmhexcolorimage-li-nowh tm-per-row"> <label for="tmcp_choice_1_2_4"> <input class="tmcp-field tmhexcolor_1_2_4 tm-epo-field tmcp-checkbox tcenabled" name="tmcp_checkbox_1_2" data-limit="1" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;3&quot;]" data-original-rules="[&quot;3&quot;]" data-rulestype="[&quot;&quot;]" value="Mirinda_2" id="tmcp_choice_1_2_4" tabindex="4" type="checkbox"> <span for="tmcp_choice_1_2_4"></span><span class="tc-label tm-label">Mirinda</span></label> <span class="price tc-price hidden"> <span class="amount">3.00lei</span> </span> </li> <li class="tmcp-field-wrap tmhexcolorimage-li-nowh tm-per-row"> <label for="tmcp_choice_1_3_5"> <input class="tmcp-field tmhexcolor_1_3_5 tm-epo-field tmcp-checkbox tcenabled" name="tmcp_checkbox_1_3" data-limit="1" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;3&quot;]" data-original-rules="[&quot;3&quot;]" data-rulestype="[&quot;&quot;]" value="7 up_3" id="tmcp_choice_1_3_5" tabindex="5" type="checkbox"> <span for="tmcp_choice_1_3_5"></span><span class="tc-label tm-label">7 up</span></label> <span class="price tc-price hidden"> <span class="amount">3.00lei</span> </span> </li> <li class="tmcp-field-wrap tmhexcolorimage-li-nowh tm-per-row"> <label for="tmcp_choice_1_4_6"> <input class="tmcp-field tmhexcolor_1_4_6 tm-epo-field tmcp-checkbox tcenabled" name="tmcp_checkbox_1_4" data-limit="1" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;3&quot;]" data-original-rules="[&quot;3&quot;]" data-rulestype="[&quot;&quot;]" value="Mountain Dew_4" id="tmcp_choice_1_4_6" tabindex="6" type="checkbox"> <span for="tmcp_choice_1_4_6"></span><span class="tc-label tm-label">Mountain Dew</span></label> <span class="price tc-price hidden"> <span class="amount">3.00lei</span> </span> </li> </ul>

Answer 1

if you add this code below your checkbox html, you'll see it creates a dropdown from your check boxes, when selected the dropdown then checks the correct checkbox, this should mean that whatever plugin youre using continues to function correctly, just add display:none; on the parent of the checkboxes after, I've tested with your html.

See in action:-

 // loop through checkboxes and create an option in our dropdown $(document).ready(function(){ $(".tmcp-field").each(function(){ var checkbox = $(this); var optionElem = document.createElement("option"); optionElem.setAttribute("value", checkbox.val()); $(optionElem).html($(this).parents('li').find('.tc-label').text()); document.getElementById('checkboxclone').appendChild(optionElem); }); }); //check the relevant checkbox when dropdown selected $("#checkboxclone").on("change", function(){ var selected = $(this).val(); $(".tmcp-field").each(function(){ $(this).prop('checked', false); if($(this).val() == selected){ $(this).prop('checked', true); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul data-rules="{&quot;Pepsi_0&quot;:[&quot;3&quot;],&quot;Pepsi Twist_1&quot;:[&quot;3&quot;],&quot;Mirinda_2&quot;:[&quot;3&quot;],&quot;7 up_3&quot;:[&quot;3&quot;],&quot;Mountain Dew_4&quot;:[&quot;3&quot;]}" data-original-rules="{&quot;Pepsi_0&quot;:[&quot;3&quot;],&quot;Pepsi Twist_1&quot;:[&quot;3&quot;],&quot;Mirinda_2&quot;:[&quot;3&quot;],&quot;7 up_3&quot;:[&quot;3&quot;],&quot;Mountain Dew_4&quot;:[&quot;3&quot;]}" data-rulestype="{&quot;Pepsi_0&quot;:[&quot;&quot;],&quot;Pepsi Twist_1&quot;:[&quot;&quot;],&quot;Mirinda_2&quot;:[&quot;&quot;],&quot;7 up_3&quot;:[&quot;&quot;],&quot;Mountain Dew_4&quot;:[&quot;&quot;]}" data-tm-validation="[]" class="tmcp-ul-wrap tmcp-elements tm-extra-product-options-checkbox tm-element-ul-checkbox element_1"> <li class="tmcp-field-wrap tmhexcolorimage-li-nowh tm-per-row"> <label for="tmcp_choice_1_0_2"> <input class="tmcp-field tmhexcolor_1_0_2 tm-epo-field tmcp-checkbox tcenabled" name="tmcp_checkbox_1_0" data-limit="1" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;3&quot;]" data-original-rules="[&quot;3&quot;]" data-rulestype="[&quot;&quot;]" value="Pepsi_0" id="tmcp_choice_1_0_2" tabindex="2" type="checkbox"> <span for="tmcp_choice_1_0_2"></span><span class="tc-label tm-label">Pepsi</span></label> <span class="price tc-price hidden"> <span class="amount">3.00lei</span> </span> </li> <li class="tmcp-field-wrap tmhexcolorimage-li-nowh tm-per-row"> <label for="tmcp_choice_1_1_3"> <input class="tmcp-field tmhexcolor_1_1_3 tm-epo-field tmcp-checkbox tcenabled" name="tmcp_checkbox_1_1" data-limit="1" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;3&quot;]" data-original-rules="[&quot;3&quot;]" data-rulestype="[&quot;&quot;]" value="Pepsi Twist_1" id="tmcp_choice_1_1_3" tabindex="3" type="checkbox"> <span for="tmcp_choice_1_1_3"></span><span class="tc-label tm-label">Pepsi Twist</span></label> <span class="price tc-price hidden"> <span class="amount">3.00lei</span> </span> </li> <li class="tmcp-field-wrap tmhexcolorimage-li-nowh tm-per-row"> <label for="tmcp_choice_1_2_4"> <input class="tmcp-field tmhexcolor_1_2_4 tm-epo-field tmcp-checkbox tcenabled" name="tmcp_checkbox_1_2" data-limit="1" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;3&quot;]" data-original-rules="[&quot;3&quot;]" data-rulestype="[&quot;&quot;]" value="Mirinda_2" id="tmcp_choice_1_2_4" tabindex="4" type="checkbox"> <span for="tmcp_choice_1_2_4"></span><span class="tc-label tm-label">Mirinda</span></label> <span class="price tc-price hidden"> <span class="amount">3.00lei</span> </span> </li> <li class="tmcp-field-wrap tmhexcolorimage-li-nowh tm-per-row"> <label for="tmcp_choice_1_3_5"> <input class="tmcp-field tmhexcolor_1_3_5 tm-epo-field tmcp-checkbox tcenabled" name="tmcp_checkbox_1_3" data-limit="1" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;3&quot;]" data-original-rules="[&quot;3&quot;]" data-rulestype="[&quot;&quot;]" value="7 up_3" id="tmcp_choice_1_3_5" tabindex="5" type="checkbox"> <span for="tmcp_choice_1_3_5"></span><span class="tc-label tm-label">7 up</span></label> <span class="price tc-price hidden"> <span class="amount">3.00lei</span> </span> </li> <li class="tmcp-field-wrap tmhexcolorimage-li-nowh tm-per-row"> <label for="tmcp_choice_1_4_6"> <input class="tmcp-field tmhexcolor_1_4_6 tm-epo-field tmcp-checkbox tcenabled" name="tmcp_checkbox_1_4" data-limit="1" data-exactlimit="" data-minimumlimit="" data-image="" data-imagec="" data-imagep="" data-imagel="" data-image-variations="[]" data-price="" data-rules="[&quot;3&quot;]" data-original-rules="[&quot;3&quot;]" data-rulestype="[&quot;&quot;]" value="Mountain Dew_4" id="tmcp_choice_1_4_6" tabindex="6" type="checkbox"> <span for="tmcp_choice_1_4_6"></span><span class="tc-label tm-label">Mountain Dew</span></label> <span class="price tc-price hidden"> <span class="amount">3.00lei</span> </span> </li> </ul> <select id="checkboxclone"> </select>