[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

select menu

Posted on 2004-10-30
4
Medium Priority
?
365 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
Comment
Question by:PeterErhard
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 12

Accepted Solution

by:
minichicken earned 1002 total points
ID: 12455964
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
minichicken earned 1002 total points
ID: 12456161
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
RozanaZ earned 498 total points
ID: 12456211
<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
ID: 12802831
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

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

656 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