如何将选择下拉菜单转换为ul下拉菜单？

Question

我想将我的选择下拉菜单转换为ul，这样我可以创建一个引导按钮，它将显示允许列表项作为选项的ul。

<select id="sortField" onchange="refreshPage('{$pageBase}','{$searchTerm}', '{$pageNumber}', '{$CurrentFacet}')"> 
    <option value="default"> 
     Sort 
    </option> 

    <option value="Relevance">Relevance</option> 
    <option value="Highest Rated">Highest Rated</option> 
    <option value="Best Sellers">Best Sellers</option> 
    <option value="New Arrivals">New Arrivals</option> 
    <option value="Lowest Price">Lowest Price</option> 
    <option value="Highest Price">Highest Price</option> 
</select> 

Answer 1

jQuery函数转换你的选择是：

var ul = $('<ul/>'); 
$("#sortField option").each(function() { 
$('<li/>').val(this.value).text(this.text).attr('onchange', $("#sortField").attr("onchange")).appendTo(ul); 
    }); 
$("#sortField").replaceWith(ul); 

希望这可以帮助

再见

Answer 2

不知道你想要什么情况下，本采取的地方，但是让我们假设它是一个onclick()事件。要将<select></select>元素与<ul></ul>元素交换，您必须先使用javascript首先通过id获取它们，然后交换它们。

<script> 
    function swapDropDown() 
    { 
     var ul = '<ul><li>...</li></ul>'; 
     document.getElementById(sortField).innerHTML = ul; 
    } 
</script> 

然后，在你选择的标签，只需添加onclick = "swapDropDown()"作为属性