Library code snippets
Dynamically filling ComboBoxes
If you are developing a professional site for a company you would invariably come across a situation where you are expected to do the above. Remember that the power of this script becomes evident when you use Javascript along with some other dynamic language such as JSP or ASP. You could probably fill the arrays used in this script with some data fetched from a database relating to the particular user. When he selects an entry in the first dropdown menu, he is immediately presented with his relevant data in the second menu, instead of making another request to the server to fetch more data. These types of scripts are very useful when you have to allow a user select some thing from a general level to a more specific level. I mean each successive dropdown menu would be more and more specific choice. Read on to understand the entire thing.
<SCRIPT LANGUAGE = "JavaScript">
<!--
var tennisplayers= new Array("Safin", "Andre Agassi", "Pete Sampras", "Anna Kournikova",
"Martina Hingis");
var cricketplayers = new Array("Sachin Tendulkar", "Steve Waugh", "Brian Lara",
"Sir Don Bradman");
function set_player() {
var select_sport = document.myform.sport;
var select_player = document.myform.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]);
}
if (selected_sport == "cricket"){
for(var i=0; i<cricketplayers.length; i++)
select_player.options[select_player.options.length] = new
Option(cricketplayers[i]);
}
}
-->
</SCRIPT>
<BODY>
<FORM NAME="myform" METHOD="POST">
Sport
<SELECT NAME="sport" onChange="set_player()">
<OPTION VALUE="tennis">-------
<OPTION VALUE="tennis">Tennis
<OPTION VALUE="cricket">Cricket
</SELECT>
Player
<SELECT NAME="player">
<OPTION>------
</SELECT>
</FORM>
</BODY>
Related articles
Related discussion
-
VB.NET: Hide and show table using radio buttons
by converter2009 (1 replies)
-
Java Script, File uploading on ftp server using java script code
by h_c_a_andersen (2 replies)
-
.NET Developer in Ghana Required....
by sysview (0 replies)
-
Problem when using TemplateField and ImageButton
by ashiquemca (15 replies)
-
problem with special characters
by avlisodraude (1 replies)
Related podcasts
-
jQuery in ASP.NET
In this episode Chris Brandsma, Rick Strahl, Dave Ward, Bertrand Le Roy, Scott Koon, and Steven Harman discuss Microsoft's jQuery in ASP.NET announcement.This episode of the Alt.NET Podcast is brought to you by LLBLGen Pro, the most mature O/R mapper and code generator out there.Are you loo...
Events coming up
-
Dec
8
December Silicon Valley Ruby Meetup
Moffett Field, United States
In a World of Middleware, Who Needs Monolithic Applications? by Jon Crosby With Rack emerging as the standard for composing web applications and services, most recently with Rails adoption, an architectural shift is taking place. Learn how to create next generation web services by reusing existing Rack middleware and supplementing with your own components and micro-frameworks like Sinatra. Bio : Jon likes music, the Open Web, Ruby, Erlang, Haskell, Objective-C, JavaScript and coffee.
The following code which I copied out of a javascript book is not working. What am I doing wrong?
<html>
<head>
<title>Load Dropdown</title>
<script language="JavaScript">
<!--
var cities = new array(4);
cities["Australia"] = ["Sydney", "Melbourne", "Canberra", "Perth", "Brisbane"];
cities["France"] = ["Paris", "Lyons", "Nice", "Dijon"];
cities["Japan"] = ["Tokyo", "Kyoto", "Osaka", "Nara"];
cities["New Zealand"] = ["Auckland", "Wellington", "Christchurch", "Dunedin", "Queenstown"];
Function removeOptions (City)
{
For (i=0; i< City.options.length; i++)
City.options[i] = null;
}
funtion addOptions (cities, City)
{
var i=0;
removeOptions (City); //called function to clear out the options
for (i=0; i < cities.length; i++)
City[i] = new option (cities[i], cities[i]); //I DON'T UNDERSTAND WHAT THE SYTAX TO THIS LINE SHOULD BE, I THINK IT'S INCORRECT.
}
-->
</script>
</head>
<body>
<h2>Vacation Chooser</h2>
<form name="testform" id="testform">
Country:
<select name="country" id="country" onChange="addOptions(cities[this.options[this.selectedIndex].text],document.testform.city)">
<option selected>Australia</option>
<option>France</option>
<option>Japan</option>
<option>New Zealand</option>
</select>
City:
<select name="city" id="city">
<option>Sydney</option>
<option>Melborne</option>
<option>Canberra</option>
<option>Perth</option>
<option>Brisbane</option>
</select>
</form>
</body>
</html>]
This thread is for discussions of Dynamically filling ComboBoxes.