使用jQuery将selected属性添加到选择菜单中的选项 [英] 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');

这是目前的代码:

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

推荐答案

查看 之前关于 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');

但是，只要您继续使用 jQuery 方法来处理 val() 或 ':selected'，您就不应该遇到任何问题，只有在解析 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将selected属性添加到选择菜单中的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！