Добавить выбранный атрибут к опции в меню выбора с помощью jQuery

Я делаю плагин меню выбора, чтобы заменить уродливые выборы по умолчанию и быть согласованным в разных ОС.

Вот демонстрация (только 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);

person elclanrs    schedule 26.04.2011    source источник
comment
Вы пробовали использовать .attr('selected', true)?   -  person NT3RP    schedule 26.04.2011
comment
я знаю, что этот плагин поддерживает выбранные: programmingdrunk.com/current-projects/dropdownReplacement/#use   -  person mkoryak    schedule 26.04.2011
comment
.attr('selected', true) тоже не работает.   -  person elclanrs    schedule 26.04.2011
comment
Я попробовал этот код на вашей тестовой странице в FF 4: у меня работает отлично! Атрибут не назначается непосредственно в FireBug, но значение и выбранная опция выбора меняются каждый раз, когда я меняю атрибут индекса.   -  person CoolEsh    schedule 26.04.2011
comment
Это работает и для меня! Как сказал CoolEsh, он не назначен в firebug, но работает правильно. jsfiddle.net/smAZq   -  person Kristoffer Lundberg    schedule 26.04.2011


Ответы (3)



Начиная с 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)
person sidarcy    schedule 10.07.2013
comment
Это должен быть лучший ответ, намного проще, чем другие, более старые. - person Jon Mattingly; 21.08.2014
comment
Спасибо @sidarcy. Это мне очень помогло. Конечно, это должно идти сверху. - person offshore; 18.08.2015
comment
Разве это не должно быть .prop("selected", true)? Насколько я помню, при использовании старого подхода для этого случая должно быть .attr("selected", "selected"). - person rabudde; 19.07.2016

Учитывая ваш последний комментарий, я предполагаю, что ваша проблема связана с firebug, а не с вашим кодом. Почему это работает с другими атрибутами, кроме «выбранных», заключается в том, что выбор параметра из раскрывающегося списка не изменяет выбранный атрибут в DOM. Уверяю вас, с вашим кодом все в порядке.

person Kristoffer Lundberg    schedule 26.04.2011