使用jQuery在下拉菜单中为选项添加选定属性

Question

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

这是演示（仅限Firefox和Webkit）：
http://spacirdesigns.com/selectMenu/

它已经可以工作了，但是我遇到了一个问题，就是无法将 "selected" 属性分配给选项。该代码对于任何其他属性都有效，但我无法让它与 "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);

- elclanrs

---

你尝试过使用.attr('selected', true)吗？ - NT3RP

我知道这个插件支持选定：http://programmingdrunk.com/current-projects/dropdownReplacement/#use - mkoryak

.attr('selected', true) 也不起作用。 - elclanrs

我在您的测试页面上测试了这段代码，使用 FF 4 运行良好！虽然 FireBug 中未直接分配属性，但每次更改索引属性时，选择器的值和已选选项都会发生变化。 - CoolEsh

是的，我刚刚添加了一个按钮，它会弹出所选状态，并且它可以正常工作，只是在Firebug中不显示。这让我疯狂了。请查看演示：http://spacirdesigns.com/selectMenu/。 - elclanrs

我也试过了，就像CoolEsh说的那样，在firebug中没有被分配，但它可以正常工作。http://jsfiddle.net/smAZq/ - Kristoffer Lundberg

Answer 1

自从jQuery 1.6版本起，要检索和更改表单元素的checked、selected或disabled状态等DOM属性，请使用.prop()方法。

$("#someselect option[value=somevalue]").prop("selected", "selected")

编辑：

选择选项：

$("#someselect option[value=somevalue]").prop("selected", true)

取消选择：

$("#someselect option[value=somevalue]").prop("selected", false)

- sidarcy

---

这应该是最佳答案，比其他旧的答案简单得多。 - Jon Mattingly

谢谢@sidarcy。这对我帮助很大。当然，它应该放在顶部。 - Attiq Ur Rehman

难道不应该是.prop("selected", true)吗？我记得在旧的方法中，对于这种情况必须使用.attr("selected", "selected")。 - rabudde

Answer 2

请查看这个关于SO的详细回答：

如果您真的想保持带有selected属性的HTML输出，而不仅仅是让jQuery在select元素上保持正确的selectedIndex属性，那么您可以使用原始的setAttr()功能进行修改。

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

但是，只要您继续使用用于val()或':selected'的jQuery方法，就不应该出现任何问题。只有在解析HTML以查找selected属性时，您可能会遇到问题，这是不应该做的事情，永远不要这样做。

- regilero

---

谢谢。我也发现另一篇帖子很有用，链接是https://dev59.com/iVDTa4cB1Zd3GeqPJ4ZA。 - elclanrs

Answer 3

根据您最新的评论，我认为您的问题是Firebug，而不是您的代码。为什么除了“selected”之外的其他属性都可以正常工作，因为从下拉列表中选择选项不会修改DOM中的选定属性。我向您保证，您的代码没有任何问题。

- Kristoffer Lundberg