Solved

Populate a second DropDownList and a TextBox based on selection in first DropDownList

Posted on 2011-09-27
5
176 Views
Last Modified: 2012-05-12
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.

<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>

Open in new window


I put this:
onchange="document.getElementById('Location').selectedIndex=this.selectedIndex"

Open in new window

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! The two DropDownLists and the Address TextBox
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;
}

Open in new window

0
Comment
Question by:megnin
  • 3
  • 2
5 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36713491
Use :
    function doTheRight(dd_index) {
        var arr = ["", "1 North St.", "2 Central St.", "3 South St.", "4 Lakeside Park"];
        if (dd_index >= 0 && dd_index <= 3) {
            document.getElementById('<%= Location.ClientID %>').selectedIndex = dd_index;
            document.getElementById('<%= Address.ClientID %>').value = arr[dd_index];
        }
        else if (dd_index >= 4) {
            document.getElementById('<%= Location.ClientID %>').selectedIndex = 4;
            document.getElementById('<%= Address.ClientID %>').value = arr[4];
        }
    }

Open in new window


With : <asp:DropDownList ID="Department" runat="server" onchange="doTheRight(this.selectedIndex);" >

Test page :
<%@ Page Title="Page d'accueil" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script language="javascript" type="text/javascript">

    function doTheRight(dd_index) {
        var arr = ["", "1 North St.", "2 Central St.", "3 South St.", "4 Lakeside Park"];
        if (dd_index >= 0 && dd_index <= 3) {
            document.getElementById('<%= Location.ClientID %>').selectedIndex = dd_index;
            document.getElementById('<%= Address.ClientID %>').value = arr[dd_index];
        }
        else if (dd_index >= 4) {
            document.getElementById('<%= Location.ClientID %>').selectedIndex = 4;
            document.getElementById('<%= Address.ClientID %>').value = arr[4];
        }
    }

</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<table>
<tr>
    <td>
Department:</td>
    <td colspan="3">
        <asp:DropDownList ID="Department" runat="server" onchange="doTheRight(this.selectedIndex);" >
            <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>
</table>
</asp:Content>

Open in new window

0
 
LVL 1

Author Closing Comment

by:megnin
ID: 36716987
That is awesome!

For some reason this format never works for me:
document.getElementById('<%= Location.ClientID %>').selectedIndex = dd_index;

Open in new window

If I use this format it works fine:
document.getElementById('Location').selectedIndex = dd_index;

Open in new window


Do you know why that might be?

So, once I chaged the function like this it works perfectly:
function doTheRight(dd_index) {
    var arr = ["", "1 North St.", "2 Central St.", "3 South St.", "4 Lakeside Park"];
    if (dd_index >= 0 && dd_index <= 3) {
        document.getElementById('Location').selectedIndex = dd_index;
        document.getElementById('Address').value = arr[dd_index];
    }
    else if (dd_index >= 4) {
        document.getElementById('Location').selectedIndex = 4;
        document.getElementById('Address').value = arr[4];
    }
}

Open in new window


Thank you so much!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36717646
0
 
LVL 1

Author Comment

by:megnin
ID: 36717907
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. ;-)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36718425
don't worry about that, look like you create  a simple web page (html)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now