GridView: Dynamic Cascading DropDownList using JavaScript

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 TemplateFields 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;
            //you may need to change the index of cells value based on the location
            //of your ddlReason DropDownList
            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 2^nd 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.