David Megnin
asked on
Populate a second DropDownList and a TextBox based on selection in first DropDownList
Hi Experts,
I need some help using JavaScript to set the "Location" DropDownList value and the "Address" TextBox depending on what's selected in the "Department" DropDownList.
If North, Central or South are selected in the "Department" DDL, then the coresponding North, Central or South item in the "Location" DDL should be selected. If any of the other items in "Department" is selected then Lakeside Office should be selected in the "Location" DDL as the rest of the items are departments in the Lakeside Office. North, Central and South are separate offices.
For the "Address" TextBox there are 4 possible addresses. Let's just call them "1 North St.", "2 Central St.", "3 South St." and "4 Lakeside Park" for simplicity.
The selection in the "Location" DDL should cause the "Address" TextBox to be populated with the obvious address.
I'm trying to help the users out a little bit in completing this form. We have three satellite offices, North, Central and South and the corporate office, "Lakeside" is where all the departments are located other than the departments listed as "North One-Stop", "Central One-Stop", etc.
I put this:
Thank you!
I've added this (it's incomplete) to the onchange of the "Location" DropDownList and it works if I select the location directly using this DDL but when this ddl is set by the JavaScript when a selection is made on the "Department" ddl, it doesn't trigger the script to set the TextBox value. How can I trigger the onchange of a DDL when the DDL is changed via JavaScript?
I need some help using JavaScript to set the "Location" DropDownList value and the "Address" TextBox depending on what's selected in the "Department" DropDownList.
If North, Central or South are selected in the "Department" DDL, then the coresponding North, Central or South item in the "Location" DDL should be selected. If any of the other items in "Department" is selected then Lakeside Office should be selected in the "Location" DDL as the rest of the items are departments in the Lakeside Office. North, Central and South are separate offices.
For the "Address" TextBox there are 4 possible addresses. Let's just call them "1 North St.", "2 Central St.", "3 South St." and "4 Lakeside Park" for simplicity.
The selection in the "Location" DDL should cause the "Address" TextBox to be populated with the obvious address.
I'm trying to help the users out a little bit in completing this form. We have three satellite offices, North, Central and South and the corporate office, "Lakeside" is where all the departments are located other than the departments listed as "North One-Stop", "Central One-Stop", etc.
<tr>
<td>
Department:</td>
<td colspan="3">
<asp:DropDownList ID="Department" runat="server" >
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="North">North One-Stop</asp:ListItem>
<asp:ListItem Value="Central">Central One-Stop</asp:ListItem>
<asp:ListItem Value="South">South One-Stop</asp:ListItem>
<asp:ListItem Value="CBR">Communications and Business Relations</asp:ListItem>
<asp:ListItem Value="Executive">Executive</asp:ListItem>
<asp:ListItem Value="Fiscal">Fiscal</asp:ListItem>
<asp:ListItem Value="HR">Human Relations</asp:ListItem>
<asp:ListItem Value="IT">Information Technology</asp:ListItem>
<asp:ListItem Value="Legal">Legal</asp:ListItem>
<asp:ListItem Value="Operations">Operations</asp:ListItem>
<asp:ListItem Value="QA">Quality Assurance</asp:ListItem>
<asp:ListItem Value="Training">Training</asp:ListItem>
<asp:ListItem Value="NA">N/A</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td style="white-space: nowrap;">
Employment Location:</td>
<td colspan="3">
<asp:DropDownList ID="Location" runat="server" >
<asp:ListItem Value=""></asp:ListItem>
<asp:ListItem Value="North">North One-Stop</asp:ListItem>
<asp:ListItem Value="Central">Central One-Stop</asp:ListItem>
<asp:ListItem Value="South">South One-Stop</asp:ListItem>
<asp:ListItem Value="Lakeside">Lakeside Office</asp:ListItem>
<asp:ListItem Value="Other">Other Location</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
Address:
</td>
<td colspan="3">
<asp:TextBox ID="Address" runat="server" Width="98%" />
</td>
</tr>
I put this:
onchange="document.getElementById('Location').selectedIndex=this.selectedIndex"
in the "Department" DDL, but it only works for the first three items. What I need is a bit more complicated and will go into an external .js file, "EmployeeAssets.js".Thank you!
I've added this (it's incomplete) to the onchange of the "Location" DropDownList and it works if I select the location directly using this DDL but when this ddl is set by the JavaScript when a selection is made on the "Department" ddl, it doesn't trigger the script to set the TextBox value. How can I trigger the onchange of a DDL when the DDL is changed via JavaScript?
function SetTextBoxValue() {
var s=document.getElementById("Location");
alert (s.selectedIndex);
if (s.selectedIndex == "2") {
document.getElementById("Address").value = "2301 W Sample Rd.Building 4, Suite 7-A";
} else {
document.getElementById("Address").value = "6301 NW 5th Way, Suite 3000";
}
return false;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
check this page : http://blog.osbornm.com/archive/2009/01/06/asp.net-4.0-clientid-overview-again.aspx
see you later, have fun!
see you later, have fun!
ASKER
Excellent article. Thank you.
My pages seem to be behaving as if Static Mode has been set as the default, but I have not consciously made any such setting. I am tarteting .NET Framework 4.0 in my web site, though. I'm using Visual Studio 2010. Could it be setting the pages default to Static Mode or something?
I'm just curious. It's not causing any problems other than makeing JavaScript code simpler. ;-)
My pages seem to be behaving as if Static Mode has been set as the default, but I have not consciously made any such setting. I am tarteting .NET Framework 4.0 in my web site, though. I'm using Visual Studio 2010. Could it be setting the pages default to Static Mode or something?
I'm just curious. It's not causing any problems other than makeing JavaScript code simpler. ;-)
don't worry about that, look like you create a simple web page (html)
ASKER
For some reason this format never works for me:
Open in new window
If I use this format it works fine:Open in new window
Do you know why that might be?
So, once I chaged the function like this it works perfectly:
Open in new window
Thank you so much!