Я создаю плагин меню выбора, чтобы заменить уродливые варианты выбора по умолчанию и обеспечить согласованность в разных ОС.
Вот демонстрация (только 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);