jQuery を使用して、順序なしリストをスタイル付きドロップダウン メニューに変換するにはどうすればよいですか?

jQuery を使用して順序なしリストからスタイル付きドロップダウン メニューを作成する

順序なしリストを洗練された機能的な に変換するドロップダウンは、Web サイト上のユーザー エクスペリエンスを大幅に向上させることができます。 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 中国語 Web サイトの他の関連記事を参照してください。