title: jQuery Show / Hide Option Based on Input Value
body: <p>I have a form that needs to display specific select options (&quot;locations&quot;) based on the user's ZIP, which is in a number field above. In this example, I need the option &quot;Out of Range&quot; to hide and the &quot;In Range&quot; to show when the user enters &quot;12345&quot; in the input.</p>
  <p>This is my HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!--Zip--&gt;
  &lt;div class=&quot;zip-field&quot;&gt;
      &lt;label for=&quot;zip&quot;&gt;Zip Code&lt;/label&gt;
      &lt;input type=&quot;number&quot; id=&quot;zip&quot; name=&quot;zip&quot; /&gt;
  &lt;/div&gt;
  
  &lt;!--Location--&gt;
  &lt;div class=&quot;location-field&quot;&gt;
      &lt;label for=&quot;location&quot;&gt;Location&lt;/label&gt;
      &lt;select id=&quot;location&quot; name=&quot;location&quot;&gt;
          &lt;option value=&quot;In Range&quot;&gt;In Range&lt;/option&gt;
          &lt;option value=&quot;Out of Range&quot;&gt;Out of Range&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This is my jQuery:</p>
  <pre class="lang-js prettyprint-override"><code>$('#zip').on('change',function(){
      if ( $(this).val() == &quot;12345&quot; ) { 
          $(&quot;#location option[value='In Range']&quot;).show();
          $(&quot;#location option[value='Out of Range']&quot;).hide();
      }
  });
  </code></pre>
  <p>Should be pretty straightforward, but no cigar.</p>