Introduction
Recently, a user in the forums was asking how to populate one dropdownlist based on a value selected from another dropdownlist using JavaScript in ASP.NET. The question was quite interesting and thought I'd share the solution I posted on that thread as a reference to others who might face the same problem.
Using the Code
The scenario is that the dropdownlists are inside a GridView TemplateField
s and the user wanted to implement a cascading dropdown by dynamically creating the items on the fly without using jQuery, AJAX and database, but purely JavaScript.
To implement that, let's add a GridView
in the markup and setup some TemplateField
columns with DropDownLists
on it. Our ASPX markup should look something like this:
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="ddlStatus"
runat="server"
onchange="buildDropDown(this);">
<asp:ListItem></asp:ListItem>
<asp:ListItem Value="Ma">Ma</asp:ListItem>
<asp:ListItem Value="Mi">Mi</asp:ListItem>
<asp:ListItem Value="Others">Others</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="ddlReason" runat="server">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
There's nothing fancy in the markup above, except that we wired-up the onchange
event to ddlStatus DropDownList
.
Now let's create the JavaScript function. Here's the code block below:
<script type="text/javascript">
function buildDropDown(obj) {
var status = obj.options[obj.selectedIndex].value;
var row = obj.parentNode.parentNode;
var rowIndex = row.rowIndex - 1;
var ddlReason = row.cells[1].getElementsByTagName('SELECT')[0];
switch (status) {
case "Ma":
ddlReason.options[0] = new Option("OK", "OK");
ddlReason.options[1] = new Option("Good", "Good");
break;
case "Mi":
ddlReason.options[0] = new Option("Data", "Data");
ddlReason.options[1] = new Option("Resoure", "Resoure");
ddlReason.options[2] = new Option("Time", "Time");
break;
case "Others":
ddlReason.options[0] = new Option("Some Item", "Some Item");
break;
}
}
</script>
The function buildDropDown()
takes a parameter obj
. This parameter is a reference to a DropDownList
control that is inside a GridView
. Now let's take a look at what we've done there.
The status
variable holds the selected value of the first DropDownList
called ddlStatus
.
The row
variable serves as the naming container to which the DropDownList ddlStatus
is located. Remember that a grid contains rows, so we need to determine which DropDown
to populate.
The ddlReason
variable represents the ddlReason DropDownList
. Once we get the row, we can easily find an element in the cells using row.cells[1].getElementsByTagName('SELECT')[0];
That line means get the first SELECT
element in the array that is within the second Column
of the GridView
. cells[1]
represents the 2nd column. Keep in mind that index always starts at 0
, so you may need to change the index based on your requirements.
The switch statement
simply determines what items to be populated in the ddlReason DropDown
based on the status value.
That's it! I hope someone finds this post useful.