如何使用 jQuery 將無序列表轉換為樣式化的下拉式選單？

使用jQuery 從無序列表建立樣式下拉選單

將無序列表轉換為時尚且實用的下拉式選單可以大幅增強網站的使用者體驗。 jQuery 為這項任務提供了一個優雅的解決方案，讓您可以輕鬆地將清單轉換為互動式下拉式選單。

問題：

如何在以下格式：

<ul class="selectdropdown">
    <li><a href="one.html" target="_blank">one</a></li>
    <li><a href="two.html" target="_blank">two</a></li>
    <li><a href="three.html" target="_blank">three</a></li>
    <li><a href="four.html" target="_blank">four</a></li>
    <li><a href="five.html" target="_blank">five</a></li>
    <li><a href="six.html" target="_blank">six</a></li>
    <li><a href="seven.html" target="_blank">seven</a></li>
</ul>

進入以下格式的下拉清單：

<select>
    <option value="one.html" target="_blank">one</option>
    <option value="two.html" target="_blank">two</option>
    <option value="three.html" target="_blank">three</option>
    <option value="four.html" target="_blank">four</option>
    <option value="five.html" target="_blank">five</option>
    <option value="six.html" target="_blank">six</option>
    <option value="seven.html" target="_blank">seven</option>
</select>

解決方案：

jQuery 可以幫助您進行此轉換process:

$(function() {
    $('ul.selectdropdown').each(function() {
        var $select = $('<select />');

        $(this).find('a').each(function() {
            var $option = $('<option />');
            $option.attr('value', $(this).attr('href')).html($(this).html());
            $select.append($option);
        });

        $(this).replaceWith($select);
    });
});

此程式碼片段使用jQuery 遍歷您的無序列表，建立一個元素並將其附加到每個清單項目。 中的值和文字元素分別從錨標記的 href 和 innerHTML 屬性中檢索。

增強功能：

要向下拉列表添加樣式，您可以使用jQuery 插件，例如[jqTransform](http://www.dfc-e.com /metiers/multimedia/opensource/jqtransform/) 提供客製化且具視覺吸引力的下拉體驗。

以上是如何使用 jQuery 將無序列表轉換為樣式化的下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！