如何使用 jQuery 將無序列表轉換為時尚的選擇下拉清單？

使用jQuery 將無序列表轉換為時尚的選擇下拉列表

想像一下，有一個充滿鏈接的無序列表，並且您希望將其轉換為時尚的選擇下拉式清單。借助 jQuery 的強大功能，這是一項簡單的任務。

轉換無序列表

以下程式碼片段將帶有連結到外部頁面的錨標記的無序列表轉換為選擇下拉式清單：

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

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

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

此程式碼使用「selectdropdown」類別迭代每個無序列表，為每個清單建立一個選擇元素，為清單中的每個連結新增一個選項，並用select 元素取代原始清單。

樣式和功能

要設定 select 下拉清單的樣式，您可以參考 jQuery 等外部樣式庫轉換。此外，您可以修改程式碼以自動在新視窗或選項卡中開啟選定的連結：

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

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

        $(this).replaceWith($select);

-       $select.on('change', function() { window.open($(this).val(), '_blank'); });
+       $select.on('change', function() { window.open($(this).find('option:selected').val(), '_blank'); });
    });
});

此修改將事件偵聽器新增至在新視窗或標籤中開啟選取鏈接的select 元素當使用者變更選擇元素的值。

透過這些增強功能，您可以使用 jQuery 從無序列表中輕鬆建立時尚且實用的選擇下拉清單。

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