How could I do: if main select Value1 show First select box else if Value2 show Second select box and if Value3 show third select box
<select id="main">
<option value="1">Value1</option>
<option value="2">Value2</option>
<option value="3">Value3</option>
</select>
<select id="first">
<option value="option1">All</option>
<option value="option2">Something</option>
</select>
<select id="second">
<option value="A">One</option>
<option value="B">Two</option>
</select>
<select id="third">
<option value="White">White</option>
<option value="Black">Black</option>
</select>
Use the ID's as values
<select id="main">
<option value="first">Value1</option>
<option value="second">Value2</option>
<option value="third">Value3</option>
</select>
and just do:
$('#main').on('change', function() {
$('#first, #second, #third').hide();
$('#'+this.value).show();
});
try
$('#main').on('change',function(){
$('#first,#second,#third').hide();
var sel = $(this).val();
if(sel==1){
$('#first').show();
}else if(sel==2){
$('#second').show();
}else{
$('#third').show();
}
});
make sure #first
,#second
,#third
are hidden at first load