How To Change Second Dropdownlist Value Based On First Dropdownlist Selection?

Today, i am going to explain you, how to change second dropdownlist value when user change the first dropdownlist  value. We can achieve  it very easily with the help of Jquery.
Here is the HTML code:

<table>
<tr id="tierFormulaTypeDiv">
<td width="50%">  
<select id="tierChangeType" name="tiermultiTimeHour" onchange="changeTierFormulaDD(this);">
<option value="1">Criket</option>
<option value="2">Football</option>
<option value="3">Tennies</option>  
</select>
</td>
</tr>
<tr id="tierFormulaDiv">
<td width="50%">
<select id="tierFormulaBase" name="tiermultiTimeHour" onchange="changeTierFormulaDD(this);">
<option value="1">Play Criket</option>
<option value="2">Play Football</option>
<option value="3">Play Tennies</option>  
</select>
</td>                               
</tr>
</table>

Here is the Jquery code:

var ddlArray= new Array();
var ddl = document.getElementById('tierFormulaBase');
for (i = 0; i < ddl.options.length; i++) {
   ddlArray[i] = ddl .options[i].text;
}

$("#tierChangeType").change(function (e) {
 var e = document.getElementById("tierChangeType");
        var selectedValue = e.options[e.selectedIndex].value;
        var selectedText = e.options[e.selectedIndex].text;

        document.getElementById('tierFormulaBase').innerHTML = "";
        var src = document.getElementById('tierFormulaBase');
        var opt = document.createElement("option");
        if(selectedValue == 1)
        {
             opt.text = ddlArray[0];
            opt.value = selectedValue;
        }else if (selectedValue == 2)
        {
             opt.text = ddlArray[1];
            opt.value = selectedValue;
        }
        else if (selectedValue == 3)
        {
             opt.text = ddlArray[2];
            opt.value = selectedValue;
        }
        src.add(opt);
});

Check running example here:
http://jsfiddle.net/jeetu_verma11/E5R7q/

Share on Google Plus

About JK STACK

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.