[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

select menu

Posted on 2004-10-30
4
Medium Priority
?
374 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
  • 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

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…
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

590 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