Announcement

Collapse
No announcement yet.

JavaScript Dynamic Drop Down Values on Action

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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: Copy & Paste JavaScript code 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>





Working...
X