AJAX

dynamically filling dropdown from another dropdown

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2006

Posts: 7

Reputation: DNRSmitty is an unknown quantity at this point

Solved Threads: 0

DNRSmitty

Offline

Newbie Poster

dynamically filling dropdown from another dropdown

Jan 16th, 2007

Here's how to dynamically fill a dropdown box depending on the selection of another dropdown box. I looked all over the web, and in this forum, finally I found someone who knew what they were talking about and actually had code that worked.
:lol:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 
<%@LANGUAGE="Javascript"%>
<html>
<head>
<title>Load Dropdown</title>
<script language="JavaScript">
<!--
var tennisplayers = new Array("Safin","Andre Agassi","Pete Sampras","Anna Kournik","Martina Hingis");
var cricketplayers = new Array("Sachin Tendulkar","Steve Waugh","Brian Lara","Sir Bradman");
function set_player(){
  var select_sport= document.form1.sport;
  var select_player= document.form1.player;
  var selected_sport= select_sport.options[select_sport.selectedIndex].value;
  select_player.options.length=0;
  if (selected_sport == "tennis"){
    for(var i=0; i < tennisplayers.length; i++)
   select_player.options[select_player.options.length] = new Option(tennisplayers[i],tennisplayers[i]);
  }
  if (selected_sport == "cricket"){
    for(var i=0; i < cricketplayers.length; i++)
   select_player.options[select_player.options.length] = new Option(cricketplayers[i],cricketplayers[i]);
  }
}  
-->
</script>
</head>
<body>
<form name="form1"><div align="center">Select Sport
  <select name="sport" onChange="set_player();">
    <option value="" selected="selected">Select Sport</option>
    <option value="tennis">Tennis</option>
    <option value="cricket">Cricket</option>
  </select> Select Player
  <select name="player">
    <option value="" selected="selected"></option>
  </select>
</form>
</body>
</html>
 
<%@LANGUAGE="Javascript"%>
<html>
<head>
<title>Load Dropdown</title>
<script language="JavaScript">
<!--
var tennisplayers = new Array("Safin","Andre Agassi","Pete Sampras","Anna Kournik","Martina Hingis");
var cricketplayers = new Array("Sachin Tendulkar","Steve Waugh","Brian Lara","Sir Bradman");
function set_player(){
  var select_sport= document.form1.sport;
  var select_player= document.form1.player;
  var selected_sport= select_sport.options[select_sport.selectedIndex].value;
  select_player.options.length=0;
  if (selected_sport == "tennis"){
    for(var i=0; i < tennisplayers.length; i++)
   select_player.options[select_player.options.length] = new Option(tennisplayers[i],tennisplayers[i]);
  }
  if (selected_sport == "cricket"){
    for(var i=0; i < cricketplayers.length; i++)
   select_player.options[select_player.options.length] = new Option(cricketplayers[i],cricketplayers[i]);
  }
}  
-->
</script>
</head>
<body>
<form name="form1"><div align="center">Select Sport
  <select name="sport" onChange="set_player();">
    <option value="" selected="selected">Select Sport</option>
    <option value="tennis">Tennis</option>
    <option value="cricket">Cricket</option>
  </select> Select Player
  <select name="player">
    <option value="" selected="selected"></option>
  </select>
</form>
</body>
</html>