如何将选择下拉列表转换为 ul 下拉列表

How to convert a select dropdown into an ul dropdown?

本文关键字：下拉列表 转换 ul 选择      更新时间：2023-09-26

我正在尝试将我的选择下拉列表转换为 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>
用于

转换选择的 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);

希望这能有所帮助

再见

不确定您希望在哪个事件上发生此问题，但让我们假设这是一个onclick()事件。 要将<select></select>元素与<ul></ul>元素交换，您必须使用 JavaScript 首先通过 id 获取它们，然后交换它们。

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

然后，在您的选择标签上，只需将onclick = "swapDropDown()"添加为属性即可

相关文章：