I want to create a chained dropdown for selectbox.
HTML:
<select class="product" id="select_1" name="product">
<option selected="selected" value=""> Choose Category </option>
<option value="men"> Mens Suits </option>
<option value="women"> Womens Suits </option>
<option value="children"> Children Suits </option>
</select>
<select class="color" id="select_2" name="color">
<option selected="selected" value=""> Choose Color </option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
</select>
<select class="size" id="select_3" name="size">
<option selected="selected" value=""> Choose Size </option>
<!-- Mens Sizes Below -->
<option value="36">36</option>
<option value="38">38</option>
<option value="40">40</option>
<!-- Womens Sizes Below -->
<option value="30">30</option>
<option value="29">29</option>
<option value="28">28</option>
<!-- Children Sizes Below -->
<option value="12">12</option>
<option value="11">11</option>
<option value="10">10</option>
</select>
Js:
$(document).ready(function() {
var sizes = {
men: [36,38,40],
women: [30,29,28],
children: [12,11,10]
}
$('.product').change(function() {
var value = $(this).val();
addToList(sizes[value]);
});
function addToList(sizes) {
removeOptions();
for (var i in sizes) {
var option = '<option value="'+i+'">'+sizes[i]+'</option>';
$('.size').append(option)
}
}
function removeOptions() {
$('.size option').each(function(){
if ($(this).val().length > 0){
$(this).remove();
}
});
}
});
What i want:
There is three select boxes like select box 1 , select box 2 and select box 3 . when i click on select box 1 then select box 2 value will change according the value selected in select box 1 and when i click on select box 2 then select box 3 value will change according the value selected in select box 2 ..
Problem
I want three chained drop down not two. eg: country , state and city.. when one country selected then state change according to country and city change according to state .
I am able to create for two select box not for three. pls tell me where I am lacking.
Above coding is an eg. actually i want it for country , state and city options.
Hope you understand my question.