Add selected attribute to option in select menu with jQuery

Question

I'm making a select menu plugin to replace the ugly default selects and be consistent across different OS.

Here's the demo (only firefox and webkit)
http://spacirdesigns.com/selectMenu/

It's already working, but I'm having problems assigning the "selected" attribute to the option. The code works with any other attribute but I can't get it to work with the selected attribute.

This works:

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

This doesn't:

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

And here's the code so far:

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

Answer 1

Check out this previous detailled answer on SO:

If you really want to maitain HTML output with selected attribute, and not only have jQuery maitaining the right selectedIndex attribute on the select element, you can hack with original settAttr() function:

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

But as soon as you keep using jQuery methods for val() or ':selected', you should'nt get any problem, you could have problem only if you were parsing HTML to find selected attribute, something you should'nt do, never.

Answer 2

As of jQuery 1.6 "To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method."

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

Answer 3

Considering your latest comment I assume your problem is firebug, not your code. Why this works with other attributes except "selected", is that selecting an option from the dropdown doesn't modify the selected attribute in the DOM. I assure you, there's nothing wrong with your code.