I have 4 Drop Downs.
Each drop by default has a --select-- option. Each box has a unique id. As you can see, the second drop down is disabled if the above drop
Rather than hiding the options, I would use the disable attribute (comments in code):
var selects = $('.drop-down');
selects.not(':eq(0)').prop('disabled', true); // disable all but first drop down
selects.on('change', function() {
var select = $(this),
currentIndex = selects.index(select),
nextIndex = currentIndex + 1;
// only do this if it is not last select
if (currentIndex != selects.length - 1) {
selects.slice(nextIndex) // get all selects after current one
.val('') // reset value
.prop('disabled', true); // disable
selects.eq(nextIndex).prop('disabled', select.val() === ''); // disable / enable next select based on val
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="drop-down">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<select class="drop-down">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<select class="drop-down">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<select class="drop-down">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Assuming the option that has '--select--'
as text has no value, just use val on the handler to check if the selected option is other than the empty
if(this.val() !== '') {
// enable following select
}
Check this one;
HTML code:
<select id="sel-1"></select>
<select id="sel-2"></select>
<select id="sel-3"></select>
<select id="sel-4"></select>
JS Code:
$(document).ready(function(){
$("[id^=sel]").change(function(){
/*
* find out the current box id
*/
var id=$(this).attr("id");
/*
* find out the current box id order number
*/
var ordernumber=id.split("-")[1];
if($(this).val()!="select")
{
//enable next one
$("#sel-"+(ordernumber+1)).show();
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
select {
margin: 5px 0;
display: block;
}
</style>
<script>
$(function() {
$('.cls-select').change(function() {
if ($(this).val() == '--select--') {
// reset and disable the next drop downs
$('.cls-select:gt(' + $('.cls-select').index($(this)) + ')').val('--select--').prop('disabled', true)
} else {
// current drop down has value so enable the next drop down
$(this).next().prop('disabled', false);
}
});
})
</script>
<select class="cls-select">
<option>--select--</option>
<option>one</option>
<option>two</option>
</select>
<select class="cls-select" disabled>
<option>--select--</option>
<option>one</option>
<option>two</option>
</select>
<select class="cls-select" disabled>
<option>--select--</option>
<option>one</option>
<option>two</option>
</select>
<select class="cls-select" disabled>
<option>--select--</option>
<option>one</option>
<option>two</option>
</select>