使用jQuery将选择的属性添加到选择菜单中的选项 [英] Add selected attribute to option in select menu with jQuery

问题描述

我正在制作一个选择菜单插件，以替换难看的默认选择，并在不同的操作系统上保持一致.

I'm making a select menu plugin to replace the ugly default selects and be consistent across different OS.

这里是演示(仅适用于Firefox和Webkit)
http://spacirdesigns.com/selectMenu/

Here's the demo (only firefox and webkit)
http://spacirdesigns.com/selectMenu/

它已经在工作，但是在将"selected"属性分配给该选项时遇到了问题.该代码可与其他任何属性一起使用，但是我无法使其与所选属性一起使用.

It's already working, but I'm having problems assigning the "selected" attribute to the option. The code works with any other attribute but I can't get it to work with the selected attribute.

这有效:

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

这不是:

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

这是到目前为止的代码:

And here's the code so far:

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

推荐答案

查看

Check out this previous detailled answer on SO:

如果您确实想保留具有selected属性的HTML输出，并且不仅让jQuery保留了select元素上正确的 selectedIndex 属性，您还可以使用原始的settAttr()函数进行破解:

If you really want to maitain HTML output with selected attribute, and not only have jQuery maitaining the right selectedIndex attribute on the select element, you can hack with original settAttr() function:

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

但是，只要您继续对val()或':selected'使用jQuery方法，就不会遇到任何问题，只有在解析HTML来查找所选属性时，您才可能遇到问题，而您不应该这样做绝对不要.

But as soon as you keep using jQuery methods for val() or ':selected', you should'nt get any problem, you could have problem only if you were parsing HTML to find selected attribute, something you should'nt do, never.

这篇关于使用jQuery将选择的属性添加到选择菜单中的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！