Web Programming

Populate Dropdown List Based On Selection of Other Dropdown List – Jquery

It is Simple. Copy jquery-1.10.1.js to your web directory

And Use this following kind of code in your html page:

<select id=”cat”>
<option val=”cars”>cars</option>
<option val=”phones”>phones</option>
<option val=”names”>names</option>
<option val=”colors”>colors</option>
</select>

<select id=”item”>
</select>
<script type=”text/javascript” src=”jquery-1.10.1.js”></script>

<script>
cars=new Array(“Mercedes”,”Volvo”,”BMW”,”porche”);
phones=new Array(‘Samsung’,’Nokia’,’Iphone’);
names=new Array(‘Kasper’,’Elke’,’Fred’,’Bobby’,’Frits’);
colors=new Array(‘blue’,’green’,’yellow’);

populateSelect();

$(function() {

$(‘#cat’).change(function(){
populateSelect();
});

});
function populateSelect(){
cat=$(‘#cat’).val();
$(‘#item’).html(”);

eval(cat).forEach(function(t) {
$(‘#item’).append(‘<option>’+t+'</option>’);
});
}

</script>

DEMO : jsfiddle.net

Leave a Reply