Cascading Dropdown lists initialization using javascript
This resource provides an approach for 'Reseting 2nd Dropdown list (months) based on SelectedIndexChange event of 1st Dropdown list (years)' with the help of javascript.
(for ease i have hard-coded years and months Dropdown lists but available dates (year and months) can be stored in a comma seperated string/text (code behind from database/etc) which can be accessed in javascript using a hidden field to reset Dropdown lists).
Cascading Dropdown initialization using javascript
Start with an Asp.net web application project in Visual Studio 2010.
Make your <html>...</html> section of UI as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
// #New# - start
function FillMonth() {
var objMessage = document.getElementById('lblMessage');
objMessage.innerHTML = "";
var objYear = document.getElementById('SelectY');
var objMonth = document.getElementById('SelectM');
var indexYear = objYear.selectedIndex;
var txtYearValue = objYear.options[indexYear].text;
var monthNames1 = ["January", "February", "March", "July", "August", "September"];
var monthNames2 = ["March", "July", "December"];
var monthNames3 = ["February", "March", "July", "August"];
// Make target DDL empty
var currentLength = objMonth.options.length;
for (l = 0; l < currentLength; l++) {
objMonth.remove(0); //It is 0 (zero) intentionally
}
// Add "Select" to DDL
var selectOption = document.createElement("option");
selectOption.text = "Select";
selectOption.value = 0;
objMonth.options.add(selectOption);
var ln = 0;
if (txtYearValue == "2009") {
ln = monthNames1.length;
}
if (txtYearValue == "2012") {
ln = monthNames2.length;
}
if (txtYearValue == "2013") {
ln = monthNames3.length;
}
// add options in the target DDL
for (var j = 0; j < ln; j++) {
var newOption = document.createElement("option");
if (txtYearValue == "2009") {
newOption.text = monthNames1[j];
}
if (txtYearValue == "2012") {
newOption.text = monthNames2[j];
}
if (txtYearValue == "2013") {
newOption.text = monthNames3[j];
}
newOption.value = (j + 1).toString();
objMonth.options.add(newOption);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Select Month and Year:" />
<br />
<div>
<select id="SelectY" name="SelectY" runat="server" size="1" onchange="return FillMonth();">
<option value="0">Select</option>
<option value="2009">2009</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
<select id="SelectM" name="SelectM" runat="server" size="1">
<option value="0">Select</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</div>
<br />
<asp:Button ID="btnGo" runat="server" Text="Go" OnClick="btnGo_Click" />
<br />
<br />
<asp:Label ID="lblMessage" runat="server" Text="Before" />
<br />
</form>
</body>
</html>
Add Click ebent for btnGo as follows:
protected void btnGo_Click(object sender, EventArgs e)
{
lblMessage.Visible = true;
lblMessage.Text = String.Format("Message: You have selected: {0}-{1}", SelectM.Items[SelectM.SelectedIndex].Text, SelectY.Items[SelectM.SelectedIndex].Text);
}
Run (F5) to test.
Sample application is attached.
Similar approach can be followed to provide cascading reset effect for multiple Dropdown lists, such as:
- Countries > States > Cities > Locations lists
or
- Categories > Technologies > Articles lists
Thanks