select menu

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?
PeterErhardAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
minichickenCommented:
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
RozanaZCommented:
<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
PeterErhardAuthor Commented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.