如何將選擇下拉菜單轉換爲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()"作爲屬性