title: Javascript: Refresh select box
body: <p>This is my HTML</p>
  
  <pre><code>&lt;select id="v-1" class="form-control input-sm"&gt;
      &lt;option value="624"&gt;Video 1&lt;/option&gt;
      &lt;option value="625"&gt;Video 2&lt;/option&gt;
      &lt;option value="626"&gt;Video 3&lt;/option&gt;
      &lt;option value="627"&gt;Video 4&lt;/option&gt;
      &lt;option value="628"&gt;Video 5&lt;/option&gt;
      &lt;option value="629"&gt;Video 6&lt;/option&gt;
      &lt;option value="630"&gt;Video 7&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>In my javascript file, i have a function that removes some of the options by adding style="display: none;" to the option tag. For example:</p>
  
  <pre><code>&lt;select id="v-1" class="form-control input-sm"&gt;
      &lt;option value="624" style="display: none;"&gt;Video 1&lt;/option&gt;
      &lt;option value="625" style="display: none;"&gt;Video 2&lt;/option&gt;
      &lt;option value="626"&gt;Video 3&lt;/option&gt;
      &lt;option value="627" style="display: none;"&gt;Video 4&lt;/option&gt;
      &lt;option value="628"&gt;Video 5&lt;/option&gt;
      &lt;option value="629"&gt;Video 6&lt;/option&gt;
      &lt;option value="630" style="display: none;"&gt;Video 7&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>But when I call $('#v-1').val(), the result is 624. I wanted the result to be 626 or the first option that doesn't have the style, display: none.</p>