jQuery>=1.9: Selecting an option in a select tag is not "fully" selected

Question

There is really strange behavior in jQuery >= 1.9! I'm not sure if it's a bug or not!

The basic HTML:

<select id="mySelect">
    <option value="1" id="opt1">Option 1</option>
    <option value="2" id="opt2">Option 2</option>
    <option value="3" id="opt3">Option 3</option>
    <option value="4" id="opt4">Option 4</option>
</select>

In jQuery <= 1.8.3, the below code works perfectly (Demo):

<script>
    $(document).ready(function() {
        $('#opt3').attr('selected', 'selected');// this line..
        $('#mySelect').val($('#opt3').val());   // OR this line, OR both lines, alerts will always be the same:
        alert($('#opt3').attr('selected'));     // alert "selected"
        alert($('#mySelect').val());            // alert "3"
    });
</script>

While in jQuery >= 1.9.0, 1st alert is "selected", and 2nd alert is "1" not "3", and Option 1 selected not Option 3! (Demo)

If we comment out the line $('#opt3').attr('selected', 'selected');, the dropdown correctly selects Option 3 but alert($('#opt3').attr('selected')); alerts "undefined", Option 3 do not get the "selected" attribute! The code should look like this:

<script>
    $(document).ready(function() {
        //$('#opt3').attr('selected', 'selected');
        $('#mySelect').val($('#opt3').val());
        alert($('#opt3').attr('selected'));  // alert "undefined", no "selected" attribute set !!
        alert($('#mySelect').val());         // alert "3" correctly
    });
</script>

If we comment out the line $('#mySelect').val($('#opt3').val());, the alert($('#opt3').attr('selected')); alerts "selected" correctly, but value of the select is not change, alerts "1"! The code should look like this:

<script>
    $(document).ready(function() {
        $('#opt3').attr('selected', 'selected');
        //$('#mySelect').val($('#opt3').val());
        alert($('#opt3').attr('selected'));  // alert "selected" correctly
        alert($('#mySelect').val());         // alert "1" !!
    });
</script>

P.S.

btw, I know some people may suggest $('#opt3').prop('selected', true); but that doesn't do any effect. What I'm trying to achieve, is to give Option 3 the "selected" attribute, and set the value of the select to "3". So is this a bug? Or am I doing something wrong?

possible duplicate of [.prop() vs .attr()](http://stackoverflow.com/questions/5874652/prop-vs-attr) — Ram, Sep 10 '13 at 12:10
@undefined in jQuery>=1.9, `$('#mySelect').val(3);` sets the value correctly, but doesn't give Option 3 the "selected" attribute! — evilReiko, Sep 10 '13 at 12:13
Please check the linked question, there is a difference between attributes and properties, DOM is based on properties, attributes are mapped to their corresponding properties on the page load and `selected` is a boolean property. — Ram, Sep 10 '13 at 12:14

Sami Racho · Accepted Answer · 2013-09-11T09:15:55.147

2

I think you're mixing prop and attr

You can do:

$('#opt3').prop('selected', 'selected').attr('selected', 'selected');
$('#mySelect').attr('value',$('#mySelect').find(':selected').val());

alert($('#opt3').prop('selected'));
alert($('#mySelect').val());
alert($('#opt3').attr('selected'));

http://jsfiddle.net/AvpLw/

edited Sep 11 '13 at 09:15

answered Sep 10 '13 at 12:22

Sami Racho

79
5

Nice answer, but if you try to add `alert($('#opt3').attr('selected'));` at the bottom line of your demo, it will alert "undefined", thee is no "selected" attribute added to the option tag! – evilReiko Sep 10 '13 at 13:16
1

$('#opt3').prop('selected', 'selected').attr('selected', 'selected'); I updated my answer. – Sami Racho Sep 11 '13 at 09:06

jQuery>=1.9: Selecting an option in a select tag is not "fully" selected

1 Answers1