jQuery won't set SELECTED

Question

I have an annoying problem where I have a jQuery selecting the various options of a SELECT option list. I want to set the SELECTED=SELECTED attribute to force something other than the first item to be the default.

Seems pretty basic, and if I set other characteristics of the OPTION tag it works fine. For instance:

$(this).addClass ('TEST');

works as you'd expect by adding the TEST class to what should be the default option. I also can do the following:

$(this).attr('annoying', "SELECTED");

This adds the attribute "annoying" with the value of "SELECTED. Sadly if I do the following:

$(this).attr('SELECTED', "SELECTED");

it just completely ignores it. If I go into Chrome's debugger and punch this in manually it does work but not from my JS file. :^(

Any ideas?

UPDATE Great suggestions so far but as nothings working I suspect something else is amiss. To provide further context ... this is a Wordpress site and I'm making the QuickEdit function bring up the right OPTION in a custom attribute to a taxonomy. For those of you who don't know Wordpress its probably not important (who knows at this stage).

Here's the full code:

jQuery(document).ready(
function ($) {
    $('.editinline').on ('click', 
    function () {
        var $data_ref = $(this).closest('tr');
        $('.bespoke-item.quick-edit').each (
            function () {
                var col_name = $(this).attr('name');
                var col_value = $data_ref.find ('.' + col_name).text();
                $(this).val(col_value); // this will work for non-enumerated widgets
                if ( $(this).is( "select" ) ) {
                    selected = false; // used as a flag on whether the SELECTED value has been found
                    options = $(this).find ('.select-option');
                    options.each( 
                        function () {
                            if ( $(this).attr('value') == col_value ) {
                                $(this).addClass ('TEST');
                                selected = true;
                                $(this).attr('SELECTED', "SELECTED");
                                this.selected = 'SELECTED';
                            } 
                        }
                    );
                    if ( !selected ) {
                        // The value of the did not match any of the selections (this likely means it wasn't set at all)
                        // In this case revert to the "static-default" setting
                        options.each( 
                            function () {
                                if ( $(this).attr('static-default') ) {
                                    $(this).attr ('SELECTED' , 'SELECTED');
                                    alert ("Found value in static default " + $(this).val());
                                    selected = true;
                                } else {
                                    $(this).removeAttr ( 'SELECTED' );
                                }
                            }
                        );
                    }
                }

            }
        );
    }
);

});

Can you post a small, self-contained example demonstrating the problem? It's always **much** better to do that, so people don't waste their time guessing at what's going on. (And because when you create one, at *least* 80% of the time you figure out why you're having trouble in the first place...) — T.J. Crowder, Dec 02 '12 at 16:18
See jQuery `.prop()`. `.attr()` is not appropriate (jQuery 1.6+) since technically `selected` is not an attribute. — Sparky, Dec 02 '12 at 16:26
i believe `selected` is a property, not an attribute. try using `prop()` instead of `attr()`. — jbabey, Dec 02 '12 at 16:43

score 3 · Answer 1 · edited May 23 '17 at 10:24

3

Three options for you (all assume that this is the option element in question, as it seems to be in your question):

If you're using a recent copy of jQuery, it could be the attr vs. prop thing (also note that selected should be in lower case, not caps):
```
$(this).prop('selected', true);
```
Sometimes it's simpler just to use the DOM directly:
```
this.selected = true;
```

Or, of course, use val on the select element, setting it to the value of the option you want selected.

$("selector for the select element").val($(this).val());
// or better (as `value` is entirely reliable on option elements):
$("selector for the select element").val(this.value);

Live Examples of All Three | Source

edited May 23 '17 at 10:24

Community

1
1

answered Dec 02 '12 at 16:16

T.J. Crowder

1,031,962
187
1,923
1,875

Excellent advice and when I saw your "prop" versus "attr" comment I was sure that was going to solve it. Sadly none of these options has worked which makes me think that something else is at play. – ken Dec 02 '12 at 16:31
@ken: *"...which makes me think that something else is at play"* Indeed. So we need that self-contained example. :-) – T.J. Crowder Dec 02 '12 at 16:32

jQuery won't set SELECTED

1 Answers1