Dynamic Drop Down List

Sandeep Gangadharan Mar 26, 2008

General

Use this script when you need to offer multiple choices in your forms. Clicking a link dynamically changes the contents of the accompanying drop down list. Add as many options as you need. Complete details are explained in the script.

Notes

Created by: Sandeep Gangadharan
Web Site: http://www.sivamdesign.com/scripts/
Posted: March 26, 2008

Source Code

Paste this source code into the designated areas.

External file

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

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Sandeep Gangadharan | http://www.sivamdesign.com/scripts/ */

function changer(link) {
  if (link=="") {
    return; }

//======================
// Edit this portion below. For each new state copy and paste
// the entire IF statement and change the name of the state and the cities.
// Make sure the spelling of the state is the same in the IF statement and in the link.

  if (link=="Arizona") {
    document.theForm.theState.value="Arizona";
    var theOptions=new Array (
      "Bisbee",
      "Deer Valley",
      "Flagstaff",
      "Mesa",
      "Phoenix"); }
  else if (link=="California") {
    document.theForm.theState.value="California";
    var theOptions=new Array (
      "Alameda",
      "Bakersfield",
      "Burbank",
      "Los Angeles"); }
  else if (link=="Florida") {
    document.theForm.theState.value="Florida";
    var theOptions=new Array (
      "Altamonte Springs",
      "Boca Raton",
      "Miami",
      "West Palm Beach"); }
  else if (link=="New York") {
    document.theForm.theState.value="New York";
    var theOptions=new Array (
      "Albany",
      "East Rockaway",
      "New York City"); }

// Do not edit anything below this line:
//======================

  i = document.theForm.secondChoice.options.length;
    if (i > 0) {
      document.theForm.secondChoice.options.length -= i; document.theForm.secondChoice.options[i] = null;
    }

  var theCount=0;
  for (e=0; e<theOptions.length; e++) {
    document.theForm.secondChoice.options[theCount] = new Option();
    document.theForm.secondChoice.options[theCount].text = theOptions[e];
    document.theForm.secondChoice.options[theCount].value = theOptions[e];
    theCount=theCount+1; }
}

//  NOTE: [document.theForm.theState.value] will get you the name of the state,
//  and [document.theForm.secondChoice.value] the name of the city chosen

Head

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


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

Body

Paste this code into the BODY section of your HTML document


<form name=theForm>
  <strong>Select a State:</strong><br>
  <a href="javascript:changer('Arizona')">Arizona</a> | 
  <a href="javascript:changer('California')">California</a> | 
  <a href="javascript:changer('Florida')">Florida</a> | 
  <a href="javascript:changer('New York')">New York</a>
  <br><br>
  <strong>Then ...</strong><br>
  <input type="hidden" name="theState">
  <select name="secondChoice">
     <option value="">Select a City</option>
  </select>
</form>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details