0

選択ボックスをカスタム HTML リストに置き換える関数の作成を開始しました。ただし、選択したオプションに対して「:selected」セレクターを認識できないようです。いくつかの方法を試しましたが、選択ボックスには選択された属性のオプションがあります;]

これに関するヘルプは非常に高く評価されています。

$('select').each(function(){
    var $ulSelect = $('<ul />');
    var $options;
    var $numSelected = 0;

    $options = $('option', this).map(function(index, element){
        var $selectedClass = '';
        if ($(element).is(':selected')) {
            $numSelected++;
            $selectedClass = ' class="selected"';
        }
        return $('<li data-value="'+ $(element).val() +'"'+ $selectedClass +'>'+ $(element).text() +'<a href="#" class="x-link"></a></li>');
    }).appendTo($ulSelect);

    var $ulSelectWrap = $('<div />')
        .addClass('ul-select-wrap')
        .prepend($ulSelect)
        .prepend('<span class="selected">'+ $('option:eq(0)', this).text() + $activeText +'</span>');

    $(this).hide().before($ulSelectWrap);
});
4

1 に答える 1

0

jsFiddle でコードを確認しましたが、実際に選択された要素を選択しても問題はありませんでした。私が遭遇した問題は.appendTo、配列 (.map() によって返される) を取得できないことです。したがって、代わりにこれを使用することをお勧めします。

$.each($options, function() {
    $(this).appendTo($ulSelect);
});

そして、別の問題は、$('option:eq(0)', this)代わりに$('option:selected', this);を使用していると思います。前者は常に最初のオプションをアクティブとして表示します (ただし、li選択した要素に対応する要素だけがselectedクラスを正しく持っています)。

デモをチェックして、コードの更新されたバージョンを確認してください。

于 2012-07-06T09:17:20.650 に答える