web-dev-qa-db-ja.com

jqueryを使用して、順序付けされていないリストを適切なスタイルの<select>ドロップダウンに変換するにはどうすればよいですか？

順序付けされていないリストをこの形式に変換するにはどうすればよいですか

<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を使用していますか？

編集：選択/ドロップダウンからエントリを選択すると、リンクが新しいウィンドウまたはタブで自動的に開きます。また、次のようにスタイルを設定したいと思います： http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

javascriptjquerycssxhtml
17
Jitendra Vyas
$('ul.selectdropdown').each(function() {
    var select = $(document.createElement('select')).insertBefore($(this).hide());
    $('>li a', this).each(function() {
        var a = $(this).click(function() {
            if ($(this).attr('target')==='_blank') {
                window.open(this.href);
            }
            else {
                window.location.href = this.href;
            }
        }),
        option = $(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()).click(function() {
            a.click();
        });
    });
});

あなたの最後のコメントへの返信、私はそれを少し修正しましたが、それをテストしていません。お知らせ下さい。

$('ul.selectdropdown').each(function() {
    var list = $(this), select = $(document.createElement('select')).insertBefore($(this).hide());

    $('>li a', this).each(function() {
        var target = $(this).attr('target'),
        option = $(document.createElement('option'))
            .appendTo(select)
            .val(this.href)
            .html($(this).html())
            .click(function(){
                if(target==='_blank') {
                    window.open($(this).val());
                }
                else {
                    window.location.href = $(this).val();
                }
            });
    });
    list.remove();
});
13
czarchaic
_$(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コードと同様に、$(document).ready(function() { ... });ブロック内、またはより短いバージョンの$(function() { ... });内でラップする必要があります。これを表示するように関数を更新しました。

[〜＃〜]編集[〜＃〜]

私のコードにもwasのバグがあり、li要素からhrefを取得しようとしました。

20
Tatu Ulmanen

このソリューションは、IE）でも機能し、選択したアイテム（アンカータグ内）で機能します。

$('ul.selectdropdown').each(function(){
var list=$(this),
    select=$(document.createElement('select')).insertBefore($(this).hide()).change(function(){
  window.location.href=$(this).val();
});
$('>li a', this).each(function(){
  var option=$(document.createElement('option'))
   .appendTo(select)
   .val(this.href)
   .html($(this).html());
  if($(this).attr('class') === 'selected'){
    option.attr('selected','selected');
  }
});
list.remove();
});
2
Radim

私は最近、ulが変換され、選択をほぼ完全に模倣するソリューションを作成しました。

さらに、選択のオプションを検索し、アクティブ状態をサポートします。名前がアクティブなクラスを追加するだけで、そのオプションが選択されます。

キーボードナビゲーションを処理します。

ここのコードを見てください： GitHubコード

そしてここでの実例： コード例

順序付けされていないリストは、次の形式である必要があります。

<ul id="...">
  <li><a href="...">...</a></li>
  <li><a href="...">...</a></li>
  <li><a class="active" href="...">...</a></li>
  ...
</ul>

Ulを選択に変換するには、次のコマンドを呼び出します。

$(window).on("load resize", function() {
  ulToSelect($("ul#id"), 767);
});

ここで、＃idは順序付けされていないリストのIDであり、767は変換が行われるウィンドウの最小幅です。これは、モバイルまたはタブレットでのみ変換を実行する場合に非常に便利です。

0
q81

コードを投稿していただきありがとうございます。私のシナリオは似ていますが、私の状況は、xサイズの場合はドロップダウンリストに切り替わり、xサイズでない場合は、 csswatch を使用して要素の「表示」プロパティをチェックする応答性の場合です。一定の幅が設定されています（例：740px）。興味のある人のためにこのソリューションを共有すると思いました。これは私がタトゥのコードと組み合わせたものです。 HTMLを置き換える代わりに、新しいHTMLを作成して非表示にし、必要な場合にのみ追加します。

var $list = $('ul.list');
(listFunc = function(display){

    //Less than x-size turns it into a dropdown list
    if(display == 'block'){
        $list.hide();
        if($('.sels').length){
            $('.sels').show();
        } else {
            var $select = $('<select class="sels" />');

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

            $select.insertAfter($list);

            $('.sels').on('change', function(){
                window.location = this.value;
            });
        }
    } else {
        $('.sels').hide();
        $list.show();
    }
})(element.css('display'));
element.csswatch({
    props: 'display'
}).on('css-change', function (event, change) {
    return listFunc(change.display);
});
0
Mon