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

i know this plugin supports selected: http://programmingdrunk.com/current-projects/dropdownReplacement/#use — mkoryak, Apr 26 '11 at 13:15
I tried this code on your test page in FF 4: works fine for me! Attribute not assigned directly in FireBug but value and selected option of select is changed every time I changed index attribute. — CoolEsh, Apr 26 '11 at 13:30
Yeah, I just added a button that alerts the selected status and it works it just doesn't show in firebug. That was driving me crazy. Check the demo http://spacirdesigns.com/selectMenu/ — elclanrs, Apr 26 '11 at 13:35
It works for me too! Like CoolEsh said, it's not assigned in firebug but it works correctly. http://jsfiddle.net/smAZq/ — Kristoffer Lundberg, Apr 26 '11 at 13:35

score 32 · Answer 1 · edited Feb 11 '21 at 13:40

32

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)

edited Feb 11 '21 at 13:40

Mark

6,762
1
33
50

answered Jul 10 '13 at 14:35

sidarcy

2,958
2
36
37

2

This should be the top answer, much simpler than the other, older ones – Jon Mattingly Aug 21 '14 at 01:49
Thanks @sidarcy. It helped me a lot. Sure It should go on top. – Attiq Ur Rehman Aug 18 '15 at 13:26
1

Shouldn't it be `.prop("selected", true)`? As I remember, when using old approach for this case it has to be `.attr("selected", "selected")`. – rabudde Jul 19 '16 at 12:32

score 7 · Accepted Answer · edited May 23 '17 at 12:09

7

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.

edited May 23 '17 at 12:09

Community

1
1

answered Apr 26 '11 at 13:51

regilero

29,806
6
60
99

Tahnk you. I found this other post also, very helpful http://stackoverflow.com/questions/3729741/jquery-cannot-set-selected-selected-via-attr-on-option-elements – elclanrs Apr 26 '11 at 13:54

score 0 · Answer 3 · answered Apr 26 '11 at 13:44

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.

Add selected attribute to option in select menu with jQuery

3 Answers3

Linked