Solved

select menu

Posted on 2004-10-30
320 Views
Last Modified: 2012-02-22
I have two select drop downs on my html page.

What I select an option in the first select I want to populate the other select menu with the items relating to the option selected in the first select box.

For Example:

Select 1

Australia
USA

Select 2

When Australia is selected show:
  *Sydney
  *Brisbane

When USA is selected show:
  *New York
  * Los Angeles

How can this be done?
0
Question by:PeterErhard
    4 Comments
     
    LVL 12

    Accepted Solution

    by:
    Hi

    Something like this?

    <html>

    <script>

    function populateSecondSelect()
    {

    window.document.frmSelect.secondSelect.options[window.document.frmSelect.firstSelect.selectedIndex].text = window.document.frmSelect.firstSelect.options[document.frmSelect.firstSelect.selectedIndex].value

    }

    function makesecondselect()
    {

    window.document.testSelect.test2Select.options[window.document.testSelect.test1Select.selectedIndex] = new Option(window.document.testSelect.test1Select.options[window.document.testSelect.test1Select.selectedIndex].value)


    }

    </script>

    <body>

    Using this way the text in the second select list is just changed according to the value in the first.

    <form name="frmSelect" method="POST">


    <select name="firstSelect" onChange="populateSecondSelect()">

    <option selected value="Select One">Select One</option>
    <option value="A">a</option>
    <option value="B">b</option>

    </select><br><br>


    <select name="secondSelect">

    <option selected>Select One</option>
    <option></option>
    <option></option>

    </select>

    </form><br><br>

    Using this method the options within the select menu are actually created on the fly rather than just being changed.

    <form name="testSelect" method="POST">


    <select name="test1Select" onChange="makesecondselect()">

    <option selected value="Select One">Select One</option>
    <option value="A">a</option>
    <option value="B">b</option>

    </select><br><br>


    <select name="test2Select">

    <option selected>Select One</option>

    </select>

    </form>

    </body>

    </html>

    http://www.programmingtalk.com/showthread.php?t=12646
    0
     
    LVL 12

    Assisted Solution

    by:minichicken
    Hi

    Here a better example:

    **************************************************************************

    <html>
    <head>
    <script language="javascript">
    var lists = new Array();

    // First set of text and values
    lists['Australia']    = new Array();
    lists['Australia'][0] = new Array(
          'Sydney',
          'Brisbane'
    );
    lists['Australia'][1] = new Array(
          'Sydney',
          'Brisbane'
    );

    // Second set of text and values
    lists['USA']    = new Array();
    lists['USA'][0] = new Array(
          'New York',
          'Los Angeles'
    );
    lists['USA'][1] = new Array(
          'New York',
          'Los Angeles'
    );

    function changeList( box ) {
          list = lists[box.options[box.selectedIndex].value];
          emptyList( box.form.slave );
          fillList( box.form.slave, list );
    }
    function emptyList( box ) {
          while ( box.options.length ) box.options[0] = null;
    }
    function fillList( box, arr ) {
          for ( i = 0; i < arr[0].length; i++ ) {
                option = new Option( arr[0][i], arr[1][i] );
                box.options[box.length] = option;
          }
          box.selectedIndex=0;
    }
    </script>


    </head>
    <BODY onload="changeList(document.forms['drops'].master)">
    <form name="drops" method="get" action="#">
    <table border=0 bgcolor="#66CCFF">
    <tr>
    <td>Select a country </td>
    <td><select name="master" size=1 onchange="changeList(this)">
    <option value="Australia">Australia
    <option value="USA">USA
    </select>
    </td>
    </tr>
    <tr>
    <td>Now select a city </td>
    <td>
    <select name="slave" size=1>
    <option>Netscape 4 width
    </select>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    0
     
    LVL 8

    Assisted Solution

    by:RozanaZ
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    <script>
    var select2Options = new Array(
                new Array(/* options for Australia */
                      new Array(/*text*/'Sydney', /*value*/'Sydney'),
                      new Array('Brisbane', 'Brisbane')
                      ),
                new Array(/* options for USA*/
                      new Array('New York', 'New York'),
                      new Array('Los Angeles', 'Los Angeles')
                      )
    );
    function updateSelection()
    {
          select1Obj = document.getElementById("s1");      
          select2Obj = document.getElementById("s2");      
          selectedIndex = select1Obj.selectedIndex;
          optionsArray = select2Options[selectedIndex];

          for (i = 0; i < optionsArray.length; i++)
          {
                optionText = optionsArray[i][0];
                optionValue = optionsArray[i][1];
                select2Obj.options[i] = new Option(optionText, optionValue);
          }      
    }
    </script>
    </HEAD>
    <BODY onLoad="updateSelection()">
    <form id="f1" name="f1" >
          <select name="s1" id="s1" onChange="updateSelection()">
                <option name="s1" id="s1" value="Fred">Australia</option>
                <option name="s1" id="s1" value="Barney">USA</option>
          </select>
          <select name="s2" id="s2">      
          </select>
    </form>
    </BODY>
    </HTML>
    0
     

    Author Comment

    by:PeterErhard
    Apologies for the late response guys.

    Thanks for your comments :)

    All looks great but I need to store the IDAuto of the City too as I'm passing the value onto a modification page for the particular city that the user selected.

    I'll be populating the drop downs from a MYSQL database.
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Introduction This warning has to be one of the most commonly issued warnings in the history of PHP.  The article explains why this warning arises and what to do to mitigate the problem. How this Happens HTTP headers include many different kinds…
    Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    934 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

    21 Experts available now in Live!

    Get 1:1 Help Now