Ajouter un attribut sélectionné à l'option sélectionnez menu avec jQuery

Je suis en train de faire un menu de choix de plugin pour remplacer le moche par défaut permet de sélectionner et d'être cohérente dans les différents OS.

Voici la démo (seulement firefox et webkit)

http://spacirdesigns.com/selectMenu/

Elle fonctionne déjà, mais je vais avoir des problèmes pour l'attribution de la "sélection" de l'attribut de l'option. Le code fonctionne avec n'importe quel autre attribut, mais je ne peux pas le faire fonctionner avec l'attribut sélectionné.

Cela fonctionne:

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

Ce n'est pas le cas:

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

Et voici le code pour l'instant:

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

OriginalL'auteur elclanrs | 2011-04-26