Link to home
Start Free TrialLog in
Avatar of David Megnin
David MegninFlag for United States of America

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.

<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! User generated image
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

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of David Megnin

ASKER

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!
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. ;-)
don't worry about that, look like you create  a simple web page (html)