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

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

8 голосов
/ 26 апреля 2011

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

Вот демоверсия (только Firefox и WebKit)
http://spacirdesigns.com/selectMenu/

Это уже работает, но у меня проблемы с назначением атрибута «selected» этой опции. Код работает с любым другим атрибутом, но я не могу заставить его работать с выбранным атрибутом.

Это работает: 

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);

Ответы [ 3 ]

27 голосов
/ 10 июля 2013

Начиная с jQuery 1.6 "Для извлечения и изменения свойств DOM, таких как проверенное, выбранное или отключенное состояние элементов формы, используйте метод .prop ()." 

$("#someselect option[value=somevalue]").prop("selected", "selected")
4 голосов
/ 26 апреля 2011

Извлеките этот предыдущий подробный ответ по SO :

Если вы действительно хотите отображать вывод HTML с выбранным атрибутом, а JQuery не только имеет право selectedIndex Атрибут для элемента select, вы можете взломать с помощью оригинальной функции allocAttr (): 

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

Но как только вы продолжите использовать методы jQuery для val () или ': selected', вы не получителюбая проблема, у вас может возникнуть проблема, только если вы анализируете HTML, чтобы найти выбранный атрибут, чего вы не должны делать, никогда.

0 голосов
/ 26 апреля 2011

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

...