<select> with no options matching the bound value should not select the first item

[MartinKolarik]

Description of the bug:
When a bound <select> value is set to something that doesn't match any options, it is ignored, and first <option> is selected instead.

Related: http://stackoverflow.com/questions/36409229/using-ractive-js-how-do-you-unselect-a-selected-select-box

Versions affected:
both 0.7.3 (<select> and model go out of sync) and edge (model value replaced by first <option>)

Reproduction:
http://jsfiddle.net/7bx6pc8h/1/

Code:

{{selected}}<br>

<select value="{{selected}}">
  <option>1</option>
  <option>2</option>
</select>

var ractive = new Ractive({
  el: 'body',
  template: '#template',
  data: { selected: 'x' }
});

setTimeout(() => {
  ractive.set('selected', 'y');
  console.log(ractive.get('selected')); // logs 1
}, 3000);

Note:
The current behavior is correct in a situation where there had been a selected <option>, but it was removed from the DOM. In that case, we should select the first option. However, I think this should not be the case when ractive.set() is called explicitly.

[evs-chris]

I think this is more or less forced by browsers now. Firefox as of mid-last-year (at least that's the first encounter I had with it) and Chrome as of 49 don't seem to let you have a select with options and no selected value. There's a strong chance I've missed something though 😄

[martypdx]

Try select.selectedIndex = -1

[MartinKolarik]

@evs-chris I posted this as a solution on SO and it works in all browsers.