将select转换为ul-li

Transform select into ul li

本文关键字：ul-li 转换 select      更新时间：2023-09-26

我的产品页面中有一些尺寸选项，看起来像：

<select class="super-attribute-select">
    <option value="">Choose an Option...</option>
    <option value="12" price="1.99">38 +1.99</option>
    <option value="9" price="3.98">39 +3.98</option>
    <option value="10" price="5.97">40 +5.97</option>
    <option value="11" price="7.96">41 +7.96</option>
    <option value="8" price="9.95">42 +9.95</option>
</select>

我需要将其转换为ul-li列表，具有相同的大小值，如下所示：

<ul>
    <li><a href="#">Choose an Option...</a>
    <li><a href="#">38</a></li>
    <li><a href="#">39</a></li>
    <li><a href="#">40</a></li>
    <li><a href="#">41</a></li>
    <li><a href="#">42</a></li>
</ul>

当我点击某个ul li时，必须在select标签中选择相同大小的（选项）。

为什么不能使用Select2插件？你可以使用这样的东西：

$(document).ready(function(){
    $(".super-attribute-select option").each(function(){
        $("#select").append('<li><a href="#">' + $(this).html() + '</a></li>');
    });
    $("#select").on("click", "li a", function(e){
        e.preventDefault();
        $(".super-attribute-select").val($(this).attr("href"));
    });
});

Fiddle：http://jsfiddle.net/praveenscience/nqenx5zh/2/

相关文章：