title: How to hide and show select options
body: <p>I'm very very new to jQuery. I Googled a lot before I'm asking, though it looks silly but for me its complicated.</p>
  
  <p>I have a simple <code>&lt;select&gt;</code> list which has around 4 values like this image shown below.</p>
  
  <p><img src="https://i.stack.imgur.com/pAIFQ.png" alt="enter image description here"></p>
  
  <p>Now at runtime, I want to hide the options and show based on index or value names in jQuery. How can I achieve this?.</p>
  
  <p>My drop down box has a <code>div</code> region and simple <code>select</code> option with set of values. Please provide me a simple example.</p>
  
  <p>Sample code</p>
  
  <pre><code>&lt;Div ID = "abcd"&gt;
  &lt;select&gt;
    &lt;option value="volvo"&gt;Volvo&lt;/option&gt;
    &lt;option value="saab"&gt;Saab&lt;/option&gt;
    &lt;option value="opel"&gt;Opel&lt;/option&gt;
    &lt;option value="audi"&gt;Audi&lt;/option&gt;
  &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this how to hide Volvo/Opel at run time?... like i want to show and hide these options dynamically.</p>
  
  <p>Like Ex: When a button is pressed i want to hide Volvo. Similarly if another button is pressed i want to display Volvo back. </p>