CODEWITHSUNDEEP
javascriptjquery
Kalish
Kalish

Reputation: 833

Enable Disable options in Select

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.

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.

Baiscally enabling and disabling the maxpoints based on minpoints.

HTML looks like this

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

I am trying something like this but not up to the mark yet

    $('#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');
    });

Can someone please guide?

Upvotes: 2

Views: 3794

Answers (2)

Ashwin
Ashwin

Reputation: 12431

You rather use lt or gt this way -

$("#maxPoints").find("option:lt("+index+")").attr("disabled","disabled");
$("#maxPoints").find("option:gt("+index+")").removeAttr("disabled");

Working fiddle: here

Upvotes: 0

Ruben Infante
Ruben Infante

Reputation: 3135

You can show and hide the options selectively based on their index:

$('#minPoints').change(function () {
    var index = $(this).find('option:selected').index();
    $('#maxPoints').find('option:lt(' + index + ')').hide();
    $('#maxPoints').find('option:gt(' + index + ')').show();
});

$('#maxPoints').change(function () {
    var index = $(this).find('option:selected').index();
    $('#minPoints').find('option:gt(' + index + ')').hide();
    $('#minPoints').find('option:lt(' + index + ')').show();
});

jsfiddle

Upvotes: 3

Related Questions