CODEWITHSUNDEEP
jquerymenuselected
elclanrs
elclanrs

Reputation: 94121

Add selected attribute to option in select menu with jQuery

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

Upvotes: 11

Views: 78302

Answers (3)

sidarcy
sidarcy

Reputation: 3008

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")

Edit:

Select Option:

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

Deselect Option:

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

Upvotes: 32

regilero
regilero

Reputation: 30526

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.

Upvotes: 7

Kristoffer Lundberg
Kristoffer Lundberg

Reputation: 876

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.

Upvotes: 0

Related Questions