Question

I’m trying to create a number of dropdown menus which values depend on the previous selection.
What I’m trying to achieve is to get all following selects become disabled if the preceding one hasn’t got the value selected.

Say someone has picked an option from the first one, second one and third one – then have selected a blank value from the first one – I would like all following ones – regardless of how many there are – become disabled again.

I’ve collected all selects in the form:

var sels = obj.closest('form').find('input[type="select"]');

I think that perhaps I should get the index of the selected one and then disable all other indexes, but don’t quite know how to do it.

Here’s the structure of the form:

<form action="" method="post">  

<select name="option-1" id="option-1">
    <option value="">Select one</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>


<select name="option-2" id="option-2">
    <option value="">----</option>
</select>

<select name="option-3" id="option-3" disabled="disabled">
    <option value="">----</option>
</select>   

</form>

Now – I know how to enable them – I just need to find out how to disable all relevant ones when the user changes one of the menu values to blank.

Answer 1

There is a great function in jQuery called: nextAll();

When you write event handler to select fields like below you can jump to all next selects with this function and disable them.

$("select").change(function(){
  $("select").removeAttr("disabled");
  if($(this).val()==0){
    $(this).nextAll().attr("disabled","disabled");
  }
});

You just need to specify properly which selects you want to affect.