|
|
| Databases 101 | | | ASP.NET Chapter | | | Suggest Article | | | Discussions | | | Bookstore | | | Write for Us | | | OpenAuction | | | Our Authors | |
|
|
|
 Image & Video Software
Affiliate Solutions
Find a Consultant
Buy BSD Products
Web System Integrator
Training Solutions
IT Solutions
Add Chat To My Site
Add Online Sales Reps
Volume Licensing
|
 |
|
| Using Javascript to Dynamically Populate Select Lists | | by Pete Nelson | | | Skill level: Beginner | | | First posted: Tuesday, November 07, 2000 | |  | | | | Overview
I received an e-mail a few days ago asking how to dynamically populate a select list based on the what the user chose in a different select list. Using Javascript, here's some code that you can use and adapt to your projects. In our example, we will have a list of sports (Baseball, Football and Basketball), and choosing a specific sport will populate a second select list with some teams from that sport.
The Code
We use two generic functions for manipulating the lists: ClearOptions and AddToOptionList. Both take as their first parameter the name/refernce to the select list to edit (ex: document.MyForm.MySelectList). AddToOptionList takes two addition parameters: the option value and the option text. If you passed it "1", "My Value", it would correspond to <option value="1">My Value</option>.
If you read through the code for ClearOptions, you'll notice that it starts at the end of the list (by using OptionList.length) and removes items backwards. This is done because the length of the option list changes as we remove items, and to get an accurate length, we need to start at the bottom and work backwards.
function ClearOptions(OptionList) {
// Always clear an option list from the last entry to the first
for (x = OptionList.length; x >= 0; x--) {
OptionList[x] = null;
}
}
function AddToOptionList(OptionList, OptionValue, OptionText) {
// Add option to the bottom of the list
OptionList[OptionList.length] = new Option(OptionText, OptionValue);
}
|
In our HTML page, we have a select list called Sports, with an onChange event set to execute a function called PopulateTeams. This functions checks to see which sport is selected and populates the list of teams accordingly. Here's the full HTML and Javascript for the page.
<html>
<head>
<title>Option List Examples</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<script language="Javascript">
<!--
function PopulateTeams() {
var SportsList = document.frmMain.Sports;
// Clear out the list of teams
ClearOptions(document.frmMain.Teams);
if (SportsList[SportsList.selectedIndex].value == "1") {
AddToOptionList(document.frmMain.Teams, "1", "Oakland Athletics");
AddToOptionList(document.frmMain.Teams, "2", "San Francisco Giants");
}
if (SportsList[SportsList.selectedIndex].value == "2") {
AddToOptionList(document.frmMain.Teams, "3", "Oakland Raiders");
AddToOptionList(document.frmMain.Teams, "4", "San Francisco 49ers");
}
if (SportsList[SportsList.selectedIndex].value == "3") {
AddToOptionList(document.frmMain.Teams, "5", "Golden State Warriors");
AddToOptionList(document.frmMain.Teams, "6", "Minnesota Timberwolves");
}
}
function ClearOptions(OptionList) {
// Always clear an option list from the last entry to the first
for (x = OptionList.length; x >= 0; x = x - 1) {
OptionList[x] = null;
}
}
function AddToOptionList(OptionList, OptionValue, OptionText) {
// Add option to the bottom of the list
OptionList[OptionList.length] = new Option(OptionText, OptionValue);
}
//-->
</script>
<form name="frmMain">
<select name="Sports" onChange="PopulateTeams();" size="4">
<option>Choose a Sport</option>
<option value="1">Baseball</option>
<option value="2">Football</option>
<option value="3">Basketball</option>
</select>
<select name="Teams" size="3">
<option> </option>
</select>
</form>
</body>
</html>
|
You may ask why there are so many non-breaking spaces in the second select list. Internet Explorer will dynamically resize the second select list as it gets populated with values, while Netscape will not. The spaces make Netscape render the box to a somewhat proper size when the page first loads. One way around this would be to use a style tag on the select list to force the width.
With some additional server-side ASP code, it would be pretty easy to query a database for the select lists and use VBScript to output all the proper Javascript to the client. Have fun!
|
| | | | |
This document can be found in these Encyclopedia chapters:
º Tricks of the Trade
º Learning ASP
º JavaScript
|
|
|
|
Got something to add to this article?
Create a new discussion |
|
|
|
View Article Statistics
Authors...
Edit this article
View Preview Version
|
|
| Printable Copy of Article |
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
|
|
