Enable Disable options in Select
<p>I have two select fields. for min points and max points. Range is 5000 to 50000, What I want to achive is in maxpoint select box I want to display the values which are greater than min points selected value.</p>

<p>for example if I select 15000 from minpoint select field, then in my maxpoint select box I want to hide/disable first two options (5000 and 10000) because they are less than 15000.</p>

<p>Baiscally enabling and disabling the maxpoints based on minpoints.</p>

<p>HTML looks like this</p>

<pre><code>&lt;select class="pointSelect" tabindex="2" id="minPoints" name="minPoints"&gt;
&lt;option value="0" selected="selected"&gt;Min&lt;/option&gt;
&lt;option value="5000"&gt;5000&lt;/option&gt;
&lt;option value="10000"&gt;10000&lt;/option&gt;
&lt;option value="15000"&gt;15000&lt;/option&gt;
&lt;option value="20000"&gt;20000&lt;/option&gt;
&lt;option value="25000"&gt;25000&lt;/option&gt;
&lt;option value="30000"&gt;30000&lt;/option&gt;
&lt;option value="40000"&gt;40000&lt;/option&gt;
&lt;option value="50000"&gt;50000&lt;/option&gt;
&lt;/select&gt;
&lt;select class="pointSelect" tabindex="3" id="maxPoints" name="maxPoints"&gt;
&lt;option value="50000" selected="selected"&gt;Max&lt;/option&gt;
&lt;option value="5000"&gt;5000&lt;/option&gt;
&lt;option value="10000"&gt;10000&lt;/option&gt;
&lt;option value="15000"&gt;15000&lt;/option&gt;
&lt;option value="20000"&gt;20000&lt;/option&gt;
&lt;option value="25000"&gt;25000&lt;/option&gt;
&lt;option value="30000"&gt;30000&lt;/option&gt;
&lt;option value="40000"&gt;40000&lt;/option&gt;
&lt;option value="50000"&gt;50000&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>I am trying something like this but not up to the mark yet</p>

<pre><code>    $('#minPoints').change(function(){
    var index = $(this).find('option:selected').index();
    $('maxPoints').find('option').lt(index).attr('disabled','disabled');
    $('maxPoints').find('option').gt(index).removeAttr('disabled');
    });
</code></pre>

<p>Can someone please guide?</p>
