<p>Select the top list and the second list should populate with the corresponding related values.</p>Suggesting that select 2 should change and only show items relating to select 1 - instead it just selects the first item that pertains to the first.
<select id="ptb_testbox_temp_make">
<option id="1">Honda</option>
<option id="2">Ford</option>
<option id="3">Toyota</option>
</select>
<select id="ptb_testbox_temp_model">
<option id="8">Honda Civic</option>
<option id="9">Honda CRV</option>
<option id="10">Honda Prelude</option>
<option id="11">Honda Pilot</option>
</select>
jQuery<script>
jQuery(function($) {
var models = {
Honda: {
8: 'Honda Civic',
9: 'Honda CRV',
10: 'Honda Prelude',
11: 'Honda Pilot'
},
Ford: {
4: 'Ford Mustang',
5: 'Ford Fiesta',
6: 'Ford F-150',
7: 'Ford Escort'
},
Toyota: {
12: 'Toyota Prius',
13: 'Toyota RAV',
14: 'Toyota Corolla',
}
};
jQuery( "#ptb_testbox_temp_make" ).change(function () {
var val = $(this).val();
jQuery('#ptb_testbox_temp_model').empty();
for(var i in models[val]) {
jQuery('#ptb_testbox_temp_model').append(
jQuery('<option/>').html(models[val][i]).val(i)
);
}
});
});
</script>
Note we have a data structure that breaks the options down by first option. We then use the value of the first select to populate the second.<select data-placeholder="Show All Make" name="make" id="ptb_testbox_temp_make">
<option value="">Show All Make</option>
<option value="make_1">Ford</option>
<option value="make_2">Honda</option>
<option value="make_3">Toyota</option>
</select>
<select data-placeholder="Show All Model" name="model" id="ptb_testbox_temp_model">
<option value="">Show All Model</option>
<option value="model_1">Honda Accord</option>
<option value="model_2">Honda Civic</option>
<option value="model_3">Honda Prelude</option>
<option value="model_4">Ford Mustang</option>
<option value="model_5">Ford Festiva</option>
<option value="model_6">Ford Festiva</option>
<option value="model_7">Toyota Prius</option>
<option value="model_8">Toyota Rav4</option>
<option value="model_9">Toyota Corolla</option>
</select>
What do you notice about this select compared to yours?Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
From novice to tech pro — start learning today.
<select> are not well customizable unlike <UL> and <LI>.
In your current test page, just replace :
Open in new window
by :Open in new window