jQuery: changing the available options in a list based on the selected option
<pre><code>&lt;select id="studentinst" size="6"&gt;
    &lt;option value="1"&gt;First Installment&lt;/option&gt;
    &lt;option value="2"&gt;Second Installment&lt;/option&gt;
    &lt;option value="3"&gt;Third Installment&lt;/option&gt;
    &lt;option value="4"&gt;Fourth Installment&lt;/option&gt;
    &lt;option value="5"&gt;Fifth Installment&lt;/option&gt;
    &lt;option value="6"&gt;Sixth Installment&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>If I select 4, it should only display the first 4 options and the rest should be hidden. 
Desired output:</p>

<pre><code>  First Installment
  Second Installment  
  Third Installment
  Fourth Installment
</code></pre>

<p>How can I achieve this using jQuery?</p>

<p>see sample <a href="http://jsfiddle.net/PQ7GF/9/" rel="nofollow">link</a>  check this link... for loop doesn't work over here</p>
