View Single Post
  #94  
Old 02-23-2011, 09:33 PM
JavaScriptBank JavaScriptBank is offline
Senior Member
GB Guru
 
Join Date: Sep 2009
Posts: 180
Default JavaScript Dynamic Drop Down Values on Action

If your web pages have a huge list of options to show in the drop down menus (listed into categories), why don't you consider to use this JavaScri... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript
Code:
<script type="text/javascript">
// Created by: Sandeep Gangadharan | http://www.sivamdesign.com/scripts/
// This script downloaded from www.JavaScriptBank.com

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
</script>
Step 2: Place HTML below in your BODY section
HTML
Code:
<!--
/*
     This script downloaded from www.JavaScriptBank.com
     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<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>





Reply With Quote