Attributes: fix setting selected on an option in IE<=11

Fixes gh-2732
Close gh-2840

diff --git a/src/attributes/prop.js b/src/attributes/prop.js
index da7bc1e86d135b5aca4dd13827687772428c430c..15128b8cefb4e608cdf95843e5ecb68de94a7e34 100644 (file)
--- a/src/attributes/prop.js
+++ b/src/attributes/prop.js
@@ -79,6 +79,12 @@ jQuery.extend( {
        }
 } );
 
+// Support: IE <=11 only
+// Accessing the selectedIndex property
+// forces the browser to respect setting selected
+// on the option
+// The getter ensures a default option is selected
+// when in an optgroup
 if ( !support.optSelected ) {
        jQuery.propHooks.selected = {
                get: function( elem ) {
@@ -87,6 +93,16 @@ if ( !support.optSelected ) {
                                parent.parentNode.selectedIndex;
                        }
                        return null;
+               },
+               set: function( elem ) {
+                       var parent = elem.parentNode;
+                       if ( parent ) {
+                               parent.selectedIndex;
+
+                               if ( parent && parent.parentNode ) {
+                                       parent.parentNode.selectedIndex;
+                               }
+                       }
                }
        };
 }

diff --git a/test/unit/attributes.js b/test/unit/attributes.js
index 8b31b72a6e61b354d016a5f127458979c0238b85..e52e85b490193d348d9ffdaa428fdb536758c632 100644 (file)
--- a/test/unit/attributes.js
+++ b/test/unit/attributes.js
@@ -785,6 +785,37 @@ QUnit.test( "prop('tabindex', value)", function( assert ) {
        assert.equal( clone[ 0 ].getAttribute( "tabindex" ), "1", "set tabindex on cloned element" );
 } );
 
+QUnit.test( "option.prop('selected', true) affects select.selectedIndex (gh-2732)", function( assert ) {
+       assert.expect( 2 );
+
+       function addOptions( $elem ) {
+               return $elem.append(
+                       jQuery( "<option/>" ).val( "a" ).text( "One" ),
+                       jQuery( "<option/>" ).val( "b" ).text( "Two" ),
+                       jQuery( "<option/>" ).val( "c" ).text( "Three" )
+               )
+               .find( "[value=a]" ).prop( "selected", true ).end()
+               .find( "[value=c]" ).prop( "selected", true ).end();
+       }
+
+       var $optgroup,
+               $select = jQuery( "<select/>" );
+
+       // Check select with options
+       addOptions( $select ).appendTo( "#qunit-fixture" );
+       $select.find( "[value=b]" ).prop( "selected", true );
+       assert.equal( $select[ 0 ].selectedIndex, 1, "Setting option selected affects selectedIndex" );
+
+       $select.empty();
+
+       // Check select with optgroup
+       $optgroup = jQuery( "<optgroup/>" );
+       addOptions( $optgroup ).appendTo( $select );
+       $select.find( "[value=b]" ).prop( "selected", true );
+
+       assert.equal( $select[ 0 ].selectedIndex, 1, "Setting option in optgroup selected affects selectedIndex" );
+} );
+
 QUnit.test( "removeProp(String)", function( assert ) {
        assert.expect( 6 );
        var attributeNode = document.createAttribute( "irrelevant" ),