• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 183
  • Last Modified:

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.

<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
megnin
Asked:
megnin
  • 3
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
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
 
megninAuthor Commented:
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
 
leakim971PluritechnicianCommented:
0
 
megninAuthor Commented:
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
 
leakim971PluritechnicianCommented:
don't worry about that, look like you create  a simple web page (html)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now