Forms : Multi-Value Drop Down List 2 / The JavaScript Source

Internet.commerce

Internet.com

IT
Developer
Internet News
Small Business
Personal Technology
International

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!

Promotions

Free Announcements

General

This script provides a selection in a dropdown menu, determined by the user's previous selection. Easy to implement and customize. Could be used with other dynamic languages, such as JSP or ASP. The arrays could be created by information fetched from a database.

Notes

Created by: Kiran Pai
Web Site: http://www.codecoffee.com/
Posted: July 16, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: multiValueForm.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Kiran Pai | http://www.codecoffee.com/ */

var bluesplayers= new Array("B.B. King", "Muddy Waters", " Stevie Ray Vaughan", "George Thorogood");
var rockplayers = new Array("Alvin Lee", "David Gilmour", "Pete Townshend", "Jeff Beck");

function set_player() {
  var select_genre = document.myform.genre;
  var select_player = document.myform.player;
  var selected_genre = select_genre.options[select_genre.selectedIndex].value;

  select_player.options.length=0;
  if (selected_genre == "blues"){
    for(var i=0; i<bluesplayers.length; i++)
    select_player.options[select_player.options.length] = new Option(bluesplayers[i]);
  }
  if (selected_genre == "rock"){
    for(var i=0; i<rockplayers.length; i++)
    select_player.options[select_player.options.length] = new Option(rockplayers[i]);
  }
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="multiValueForm.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form name="myform" method="POST">
  <table>
    <tr>
    <td>Genre:</td><td>
    <select name="genre" onchange="set_player()">
    <option value="blues">Select One
    <option value="blues">Blues
    <option value="rock">Rock
    </select>
    </td>
    </tr><tr>
    <td>Guitarist:</td><td>
    <select name="player">
    <option>------
    </select>
    </td></tr>
  </table>
</form>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

3. From: Paul
Perfect
09/16/2008 18:13:11

1. From: Jay Rumsey
Great script
07/25/2008 13:09:44

2. From: Tom Hasert
07/18/2008 13:45:28

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Genre:
Guitarist:

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

3. From: PaulPerfect09/16/2008 18:13:11

1. From: Jay RumseyGreat script07/25/2008 13:09:44

2. From: Tom Hasert07/18/2008 13:45:28

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

3. From: Paul
Perfect
09/16/2008 18:13:11

1. From: Jay Rumsey
Great script
07/25/2008 13:09:44

2. From: Tom Hasert
07/18/2008 13:45:28