Solved

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

Posted on 2011-09-27
5
174 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
Comment Utility
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
Comment Utility
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
Comment Utility
0
 
LVL 1

Author Comment

by:megnin
Comment Utility
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
Comment Utility
don't worry about that, look like you create  a simple web page (html)
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

763 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

9 Experts available now in Live!

Get 1:1 Help Now