Use .querySelector(':checked'), enable several <select> tests

src/generators/dom/visitors/Element/Binding.js

@@ -30,7 +30,7 @@ export default function visitBinding ( generator, block, state, node, attribute
 	// <select> special case
 	if ( node.name === 'select' ) {
 		if ( !isMultipleSelect ) {
-			setter = `var selectedOption = ${state.parentNode}.selectedOptions[0] || ${state.parentNode}.options[0];\n${setter}`;
+			setter = `var selectedOption = ${state.parentNode}.querySelector(':checked') || ${state.parentNode}.options[0];\n${setter}`;
 		}
 
 		const value = block.getUniqueName( 'value' );
@@ -160,7 +160,7 @@ function getBindingEventName ( node, attribute ) {
 function getBindingValue ( generator, block, state, node, attribute, isMultipleSelect, bindingGroup, type ) {
 	// <select multiple bind:value='selected>
 	if ( isMultipleSelect ) {
-		return `[].map.call( ${state.parentNode}.selectedOptions, function ( option ) { return option.__value; })`;
+		return `[].map.call( ${state.parentNode}.querySelectorAll(':checked'), function ( option ) { return option.__value; })`;
 	}
 
 	// <select bind:value='selected>

test/runtime/samples/binding-select-initial-value/_config.js

@@ -1,6 +1,4 @@
 export default {
-	skip: true, // selectedOptions doesn't work in JSDOM???
-
 	html: `
 		<p>selected: b</p>
 

test/runtime/samples/binding-select-initial-value/main.html

@@ -1,9 +1,9 @@
 <p>selected: {{selected}}</p>
 
 <select bind:value='selected'>
-	<option value="a">a</option>
+	<option>a</option>
-	<option value="b">b</option>
+	<option>b</option>
-	<option value="c">c</option>
+	<option>c</option>
 </select>
 
 <p>selected: {{selected}}</p>

test/runtime/samples/binding-select-multiple/_config.js

@@ -1,12 +1,12 @@
 export default {
-	skip: true, // selectedOptions doesn't work in JSDOM???
+	skip: true, // JSDOM
 
 	data: {
 		selected: [ 'two', 'three' ]
 	},
 
 	html: `
-		<select>
+		<select multiple>
 			<option>one</option>
 			<option>two</option>
 			<option>three</option>
@@ -26,7 +26,7 @@ export default {
 
 		assert.deepEqual( component.get( 'selected' ), [ 'three' ] );
 		assert.htmlEqual( target.innerHTML, `
-			<select>
+			<select multiple>
 				<option>one</option>
 				<option>two</option>
 				<option>three</option>
@@ -40,7 +40,7 @@ export default {
 
 		assert.deepEqual( component.get( 'selected' ), [ 'one', 'three' ] );
 		assert.htmlEqual( target.innerHTML, `
-			<select>
+			<select multiple>
 				<option>one</option>
 				<option>two</option>
 				<option>three</option>
@@ -56,7 +56,7 @@ export default {
 		assert.ok( !options[2].selected );
 
 		assert.htmlEqual( target.innerHTML, `
-			<select>
+			<select multiple>
 				<option>one</option>
 				<option>two</option>
 				<option>three</option>

test/runtime/samples/binding-select/_config.js

@@ -1,6 +1,4 @@
 export default {
-	skip: true, // selectedOptions doesn't work in JSDOM???
-
 	html: `
 		<p>selected: one</p>
 
@@ -13,6 +11,10 @@ export default {
 		<p>selected: one</p>
 	`,
 
+	data: {
+		selected: 'one'
+	},
+
 	test ( assert, component, target, window ) {
 		const select = target.querySelector( 'select' );
 		const options = [ ...target.querySelectorAll( 'option' ) ];

test/runtime/samples/select-change-handler/_config.js

@@ -1,6 +1,4 @@
 export default {
-	skip: true, // JSDOM
-
 	data: {
 		options: [ { id: 'a' }, { id: 'b' }, { id: 'c' } ],
 		selected: 'b'

test/runtime/samples/select-one-way-bind-object/_config.js

@@ -1,8 +1,6 @@
 const items = [ {}, {} ];
 
 export default {
-	skip: true, // JSDOM quirks
-
 	'skip-ssr': true,
 
 	data: {