title: jQuery how to select the first non-hidden select option
body: <p>The following behaves differently between jQuery 1.9 and 1.10+:</p>
  
  <pre><code>&lt;select id="s1"&gt;
      &lt;option value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
      &lt;option value="3"&gt;3&lt;/option&gt;
  &lt;/select&gt;
  
  $('#s1 option[value=1]').hide();
  $('#s1').val('');
  </code></pre>
  
  <p>The idea behind this code is to select the first non-hidden option, after hiding some options, including the currently selected one.</p>
  
  <p>Since jQuery 1.10+ the <code>$('#s1').val('');</code> no longer selects the first non-hidden option, while <code>.val(&lt;some proper value for the particular select box&gt;)</code> works ok.</p>
  
  <p>Trying the following approaches does not help because both <code>selectedIndex</code> and <code>.first().val()</code> consider the hidden options:</p>
  
  <p><code>$("#s1").prop("selectedIndex", 0);</code></p>
  
  <p><code>$('#s1 option').first().prop('selected', true);</code></p>
  
  <p>Next thing that comes to mind (also suggested by <a href="https://stackoverflow.com/users/2138752/c-link">C-link</a>) also does not work, because the <code>:visible</code> selector does not work properly for select options.</p>
  
  <p><code>$('#s1 option:visible').first().prop('selected', true);</code></p>
  
  <p>Looking for some generic way (not depending on knowledge of what are the particular values and what options have been hidden) to achieve the same behaviour as <code>$('#s1').val('');</code> in old jQuery.</p>