I have a page that must retain the dropdown values on post-back between two dependent dropboxes (parent-child). The first technique, shown below, worked well but I could not persist the dropdown values inside a dot NET form on post-back.
After much effort I finally used a set of three division tags and toggled their display property to achieve the desired effect.
I post these two solutions here for someone in the future who might want to take a look at the code (again, the first example below worked well within a dot NET environment but would not behave on post back - the second exampled worked flawlessy - from what I could tell). No server side code was necessary - all events are driven by Javascript.
I came across the following code (which is similar to several threads I found here at the Javascript forum) which plays out in javascript the re-loading of the dependent dropdown via an array list, i.e.:
After much trial and error I was unable to get the above system to behave within a dot NET Form and decided to use three hidden divisions to maintain dropdown values between postbacks (the code below is an entire dot NET aspx test page and can be pasted into a blank Notepad file and tested.
After much effort I finally used a set of three division tags and toggled their display property to achieve the desired effect.
I post these two solutions here for someone in the future who might want to take a look at the code (again, the first example below worked well within a dot NET environment but would not behave on post back - the second exampled worked flawlessy - from what I could tell). No server side code was necessary - all events are driven by Javascript.
I came across the following code (which is similar to several threads I found here at the Javascript forum) which plays out in javascript the re-loading of the dependent dropdown via an array list, i.e.:
Code:
<script language="VB" runat="server">
var myArrayText = new Array();
myArrayText[0] = "Text 1-1,Text 1-2,Text 1-3";
myArrayText[1] = "Text 2-1,Text 2-2,Text 2-3,Text 2-4";
var myArrayValue = new Array();
myArrayValue[0] = "Value 1-1,Value 1-2,Value 1-3";
myArrayValue[1] = "Value 2-1,Value 2-2,Value 2-3,Value 2-4";
function replaceOptions(form) {
var tempText = new Array();
var tempValue = new Array();
tempText = myArrayText[form.mySelect1.selectedIndex].split(",");
form.mySelect2.length = tempText.length;
tempValue = myArrayValue[form.mySelect1.selectedIndex].split(",");
// I'm populating depending on the option chosen
for (var i = 0; i < tempText.length; i++) {
document.myForm.mySelect2.options[i].text = tempText[i];
document.myForm.mySelect2.options[i].value = tempValue[i];
}
}
</script>
<body>
<form name="myForm" runat="server">
<select name="mySelect1" onChange="replaceOptions(this.form);">
<option value="0" SELECTED>Option 1</option>
<option value="1">Option 2</option>
</select>
<select name="mySelect2">
<option value="1" SELECTED>Text 1-1</option>
<option value="2">Text 1-2</option>
<option value="3">Text 1-3</option>
</select>After much trial and error I was unable to get the above system to behave within a dot NET Form and decided to use three hidden divisions to maintain dropdown values between postbacks (the code below is an entire dot NET aspx test page and can be pasted into a blank Notepad file and tested.
Code:
<%@ Page Language="VB"%>
<%@Import Namespace = "Microsoft.VisualBasic"%>
<%@Import Namespace = "System"%>
<%@Import Namespace = "System.Web"%>
<%@Import Namespace = "System.Web.UI"%>
<%@Import Namespace = "System.Web.UI.WebControls"%>
<%@Import Namespace = "System.Web.UI.HtmlControls"%>
<script runat="server">
Sub Page_Load(sender As Object, e As EventArgs)
'no server side code required..
End Sub
</script>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta name="vs_targetSchema" content="[URL unfurl="true"]http://schemas.microsoft.com/intellisense/ie5">[/URL]
<script language="JavaScript" type="text/javascript">
function showdiv(e){
document.myForm.txtdd0.value = document.myForm.ddObj.selectedIndex;
document.myForm.ddA.SelectedIndex=0;
document.myForm.ddB.SelectedIndex=0;
document.myForm.ddC.SelectedIndex=0;
document.getElementById("divA").style.display='none';
document.getElementById("divB").style.display='none';
document.getElementById("divC").style.display='none';
document.getElementById(e).style.display='block';
document.myForm.txtdd1.value=0;
document.myForm.txtdd2.value=0;
document.myForm.txtdd3.value=0;
}
function ddASelIndx(obj){
document.myForm.txtdd1.value = obj.selectedIndex;
}
function ddBSelIndx(obj){
document.myForm.txtdd2.value = obj.selectedIndex;
}
function ddCSelIndx(obj){
document.myForm.txtdd3.value = obj.selectedIndex;
}
function onDiv(){
var intd = document.myForm.txtdd0.value;
if (intd == 0) {
document.getElementById("divA").style.display='block';
document.getElementById("divA").SelectedIndex = document.myForm.txtdd1.value;
}
if (intd == 1) {
document.getElementById("divB").style.display='block';
document.getElementById("divB").SelectedIndex = document.myForm.txtdd2.value;
}
if (intd == 2) {
document.getElementById("divC").style.display='block';
document.getElementById("divC").SelectedIndex = document.myForm.txtdd3.value;
}
}
</script>
<style type="text/css">
.clsdo{
font-family:arial;
font-size:11px;
color:#00FFFF;
background-color:#000080;
width:75px;
}
.clsdc{
font-family:arial;
font-size:11px;
color:#00FFFF;
background-color:#000080;
width:230px;
}
</style>
<body onLoad="onDiv();">
<form name="myForm" id="myForm" runat="server">
<Table>
<TR><TD>
<select name="ddObj" id="ddObj" onChange="showdiv(this.value);" runat="server" class="clsdo">
<option value="divA" SELECTED>Option 1</option>
<option value="divB">Option 2</option>
<option value="divC">Option 3</option>
</select>
</TD>
<TD>
<div id="divA" style="display:none;">
<select id="ddA" runat="server" class="clsdc" onchange="ddASelIndx(this);">
<option value=1 SELECTED>New 0</option>
<option value=2>New 1</option>
<option value=3>New 2</option>
</select>
</div>
<div id="divB" style="display:none;">
<select id="ddB" runat="server" class="clsdc" onchange="ddBSelIndx(this);">
<option value=1 SELECTED>get 0</option>
<option value=2>get 1</option>
<option value=3>get 2</option>
</select>
</div>
<div id="divC" style="display:none;">
<select id="ddC" runat="server" class="clsdc" onchange="ddCSelIndx(this);">
<option value=1 SELECTED>how 0</option>
<option value=2>how 1</option>
<option value=3>how 2</option>
</select>
</div>
</TD></TR>
</Table>
<asp:Button id="btnA" runat="server" Text="Post Back"/>
<input type="text" id="txtdd0" runat="server" value=0>
<input type="text" id="txtdd1" runat="server" value=0>
<input type="text" id="txtdd2" runat="server" value=0>
<input type="text" id="txtdd3" runat="server" value=0>
</form>
</body>
</html>![[smile]](/data/assets/smilies/smile.gif "[smile] [smile]")