使用jQuery将所选属性添加到选择菜单中的选项

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

这是演示（只有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 += '
' + item + '
' }); var menuHtml = '
' + '' + '
' + title + '
' + '
' + items + '
' + '
'; 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); 

Answer 1

查看以前关于SO的详细解答 ：

如果你真的想用选定属性来保持HTML输出，并且不仅让jQuery在select元素上保持正确的selectedIndex属性，你可以使用原始的settAttr（）函数进行破解：

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

但是只要你继续使用jQuery方法进行val（）或’：selected’，你就不应该遇到任何问题，只有在解析HTML才能找到所选属性时才会遇到问题，这是你不应该做的事情，永远不会。

Answer 2

从jQuery 1.6开始“要检索和更改DOM属性，例如表单元素的选中，选中或禁用状态，请使用.prop（）方法。”

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

Answer 3

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