How to populate one dropdownlist based on values selected in another dropdownlist using javascript in ASP .NET?

Question

5.00/5 (1 vote)

See more:

C#

I have two DropDownLists inside a GridView (gvwDta). My two DropDownLists are:

ASP.NET

<asp:DropDownList ID="ddlStatus" runat="server">
    <asp:ListItem></asp:ListItem>
    <asp:ListItem>Ma</asp:ListItem>
    <asp:ListItem>Mi</asp:ListItem>
    <asp:ListItem>Others</asp:ListItem>
</asp:DropDownList>

and

ASP.NET

<asp:DropDownList ID="ddlReason" runat="server"></asp:DropDownList>

I want to acheive this:
When I select "Ma" from "ddlStatus" then I should get the following items in "ddlReason":

C#

"OK"
"Good"

When I select "Mi" from "ddlStatus" then I should get the following items in "ddlReason":

"Data"
"Resource"
"Time"

I do not want to bind the DropDownLists to database or use AJAX.

Any help will be highly appreciated.

Regards

What I have tried:

I have tried the suggestions in this link:

http://www.aspsnippets.com/Articles/Get-selected-Text-and-Value-of-DropDownList-in-OnChange-event-using-JavaScript-and-jQuery.aspx

Posted 29-Jun-16 22:42pm

ZohaibRazaTheDProgrammer

Updated 30-Jun-16 5:13am

v2

Add a Solution

3 solutions

Solution 1

Google "asp.net cascading dropdown"

Creating Cascading DropDownLists in ASP.Net[^]

how to create Cascading Dropdown list in Asp.Net | AspdotnetCodehelp[^]

Posted 29-Jun-16 23:26pm

F-ES Sitecore

Comments

ZohaibRazaTheDProgrammer 30-Jun-16 5:41am

@F-ES Sitecore thank you for your quick response. If you please read my question you can see that I have clearly mentioned that I do not want to use a "database" or "AJAX Control" - regards

F-ES Sitecore 30-Jun-16 5:54am

Rather than binding items to the drop down just add them programmatically

http://www.aspsnippets.com/Articles/Programmatically-add-items-to-DropDownList-on-Button-Click-in-ASPNet-using-C-and-VBNet.aspx

The code in your item change event will probably be an if statement or a switch like;

if (ddl.Value = "Fruit")
{
// clear second dropdown and add all the fruit
}
else if (ddl.Value = "Cars")
{
// clear second dropdown and add all the cars
}

Solution 2

Try this it's in Html and Javascript..

HTML

<HTML>
<BODY>
<script>
function changeReason()
{
	var selectedStatus=document.getElementById("cmbStatus");
	var Reason=document.getElementById("cmbReason");
	var MaArr=new Array("OK","Good");
	var MiArr=new Array("Data","Resource","Time");
//	alert(selectedStatus.value);
	removeOptions(Reason);
	if(selectedStatus.value=="Ma")
	{
		for(i=0;i<2;i++)
		{
			var option = document.createElement("option");
			option.text = MaArr[i];
			option.value = MaArr[i];
			Reason.add(option);
		}
	}
	else if(selectedStatus.value=="Mi")
	{
		for(i=0;i<3;i++)
		{
			var option = document.createElement("option");
			option.text = MiArr[i];
			option.value = MiArr[i];
			Reason.add(option);
		}
	}
}
function removeOptions(selectbox)
{
    var i;
    for(i = selectbox.options.length - 1 ; i >= 0 ; i--)
    {
        selectbox.remove(i);
    }
}
</script>
Select One <select id="cmbStatus" onchange="changeReason()">

    <option value="Ma">Ma</option>
    <option value="Mi">Mi</option>
    <option>Others</option>
</select>
<select name="cmbReason">
</select>
</BODY>
</HTML>

I hope this will help You....

Posted 29-Jun-16 23:40pm

JayantaChatterjee

Updated 29-Jun-16 23:42pm

v2

Comments

ZohaibRazaTheDProgrammer 30-Jun-16 6:26am

@JayantaChatterjee thank you for your response. "ddlStatus" and "ddlReason" are in template field columns of gridview, how can we access these controls in your function?

JayantaChatterjee 30-Jun-16 23:08pm

You can get there IDs like this:
var selectedStatus=document.getElementById("<%=ddlStatus.ClientID%>");

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vincent Maverick Durano · Accepted Answer · 2016-06-30T05:13:00

Here you go:

ASPX:

HTML

<html xmlns="http://www.w3.org/1999/xhtml" mode="hold" /><head runat="server">
    <title></title>

    <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>
</head>
<body>
    <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>
</body>
</html>

CODE BEHIND:

C#

using System;

namespace WebFormDemo
{
    public partial class GridView : System.Web.UI.Page
    {      
        protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack) {
                GridView1.DataSource = new object[] { "1","2","3" };
                GridView1.DataBind();
            }
        }
    }
}