将select转换为ul li

Question

我的产品页面中有大小选项，如下所示：

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

当我点击某些尺寸时，必须在选择标签中选择相同尺寸（选项）的尺寸。

Answer 1

为什么不能使用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"));
    });
});

小提琴：http://jsfiddle.net/praveenscience/nqenx5zh/2/