10

醜いデフォルトの選択を置き換え、異なるOS間で一貫性を保つために、選択メニュープラグインを作成しています。

デモはこちら (Firefox と Webkit のみ)
http://spacirdesigns.com/selectMenu/

すでに機能していますが、「選択済み」属性をオプションに割り当てるのに問題があります。コードは他の属性でも機能しますが、選択した属性では機能しません。

これは機能します：

select.find('option')
    .removeAttr('whatever')
    .eq(index).attr('whatever', 'hello');

これはしません:

select.find('option')
    .removeAttr('selected')
    .eq(index).attr('selected', 'selected');

これまでのコードは次のとおりです。

(function($){

        $.fn.selectMenu = function() {

            var select = this;
            select.hide();

            var title = select.attr('title');
            var arrow = 'img/arrow.png';
            var items = '';

            select
                .children('option')
                .each(function(){
                    var item = $(this).text();
                    if ($(this).val() != '') { 
                        $(this).attr('value', item);
                    }
                    items += '<li>' + item + '</li>'
                });

            var menuHtml =
                '<ul class="selectMenu">' + 
                '<img src="' + arrow + '" alt=""/>' +
                '<li>' + title + '</li>' +
                '<ul>' + items  + '</ul>' +
                '</ul>';

            select.after(menuHtml);

            var menu = $(this).next('ul');
            var list = menu.find('ul');

            menu
                .hover(function(){}, function(){
                    list.hide();
                })
                .children('li').hover(function(){
                    list.show();
                });

            menu.find('ul li').click(function(){
                var index = $(this).index();
                menu.children('li').text($(this).text());
                select.find('option')
                    .removeAttr('selected')
                    .eq(index).attr('selected', 'selected');
                list.hide();
            });

        };

    })(jQuery);
4

3 に答える 3

32

jQuery 1.6 の時点で、「フォーム要素のチェック済み、選択済み、または無効な状態などの DOM プロパティを取得および変更するには、.prop() メソッドを使用します。」

$("#someselect option[value=somevalue]").prop("selected", "selected")

編集：

オプションを選択:

$("#someselect option[value=somevalue]").prop("selected", true)

オプションの選択を解除:

$("#someselect option[value=somevalue]").prop("selected", false)
于 2013-07-10T14:35:04.403 に答える
5

SO に関するこの以前の詳細な回答を確認してください。

select 属性を使用して HTML 出力を維持したい場合で、select 要素の正しいselectedIndex属性を jQuery で維持するだけでなく、元の settAttr() 関数を使用してハックすることもできます。

select[0].options[select[0].selectedIndex].setAttribute('selected','selected');

しかし、val() または ':selected' に jQuery メソッドを使用し続けるとすぐに、問題が発生することはありません。選択した属性を見つけるために HTML を解析している場合にのみ問題が発生する可能性があります。これは、決して行うべきではありません。 .

于 2011-04-26T13:51:05.943 に答える
0

あなたの最新のコメントを考えると、あなたの問題はあなたのコードではなくfirebugだと思います。これが「選択済み」以外の属性で機能する理由は、ドロップダウンからオプションを選択しても、DOM の選択済み属性が変更されないためです。あなたのコードには何も問題はありません。

于 2011-04-26T13:44:28.310 に答える