10

我正在制作一个选择菜单插件来替换丑陋的默认选择并在不同的操作系统中保持一致。

这是演示（仅限 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 的详细答案：

如果您真的想使用 selected 属性维护 HTML 输出，并且不仅要让 jQuery 维护 select 元素上的正确selectedIndex属性，您可以使用原始的 settAttr() 函数进行破解：

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

但是，只要您继续使用 jQuery 方法来处理 val() 或 ':selected'，就不会遇到任何问题，只有在解析 HTML 以查找选定属性时才会遇到问题，这是您不应该做的事情，永远不会.

于 2011-04-26T13:51:05.943 回答
0

考虑到您的最新评论，我认为您的问题是萤火虫，而不是您的代码。为什么这适用于除“selected”之外的其他属性，因为从下拉列表中选择一个选项不会修改 DOM 中的 selected 属性。我向你保证，你的代码没有问题。

于 2011-04-26T13:44:28.310 回答