Automatically populate drop down menu

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Greg Scharlemann
    #1

    Automatically populate drop down menu

    I would like to automatically populate a drop down menu when the page
    loads based on the selection of an item in a different drop down menu.
    I made a test page that when drop down #1 changes, drop down #2
    populates. Does anyone know how to get drop down #2 to populate based
    on what is selected in drop down #1 when the page loads?

    Here is my test code:
    *************** *************** *************** *************** ************
    <html>
    <head>
    <script language="javas cript">
    var phaseArray = new Array(4);
    var phaseTypeId = new Array(4);
    var phaseId = new Array(4);

    phaseArray[0] = "Define";
    phaseId[0] = "phs_2003000000 01";
    phaseTypeId[0] = "pht_2003000000 01";

    phaseArray[1] = "Measure";
    phaseId[1] = "phs_2003000000 02";
    phaseTypeId[1] = "pht_2003000000 01";


    phaseArray[2] = "Analyze";
    phaseId[2] = "phs_2003000000 03";
    phaseTypeId[2] = "pht_2003000000 01";

    phaseArray[3] = "Project Start-Up";
    phaseId[3] = "phs_2003000000 06";
    phaseTypeId[3] = "pht_2003000000 02";


    function populateMenu(s) {
    var i=0,j=1;
    document.overvi ew.phase.option s.length = 1; //delete current
    options
    document.overvi ew.phase.option s[0].selected = true;
    for (var i=0; i<phaseArray.le ngth; i++){
    if(s == phaseTypeId[i]) {
    document.overvi ew.phase.option s.length = j;
    document.overvi ew.phase.option s[j] = new Option(phaseArr ay[i]);
    document.overvi ew.phase.option s[j].value = phaseId[i];
    if("phs_2003000 00006" == phaseId[i])
    document.overvi ew.phase.option s[j].selected = true;
    j++;
    }
    }
    }

    </script>
    </head>
    <body>

    <form name="overview" id="overview" action="test2.j sp"
    method="post">
    <select name="phaseType "
    onChange="popul ateMenu(documen t.overview.phas eType.options[document.overvi ew.phaseType.op tions.selectedI ndex].value);">
    <option value="pht_2003 00000001">Phase 1</option>
    <option selected value="pht_2003 00000002">Phase 2</option>
    </select><br />
    <select name="phase" id="phase" style="width:10 0px;">
    <option></option>
    </select>
    </form>
    <script>populat eMenu("phs_2003 00000006");</script>

    </body>
    </html>
    *************** *************** *************** *************
    Thanks
    Tags: None
    • @SM
      #2
      Re: Automatically populate drop down menu

      Greg Scharlemann a ecrit :
      [color=blue]
      > I would like to automatically populate a drop down menu when the page
      > loads based on the selection of an item in a different drop down menu.
      > I made a test page that when drop down #1 changes, drop down #2
      > populates. Does anyone know how to get drop down #2 to populate based
      > on what is selected in drop down #1 when the page loads?[/color]

      for instance :

      <script type="text/javascript">
      function init(){ populateMenu("p hs_200300000006 ");}
      </script>
      <body onload="setTime out('init()',30 0);">
      [color=blue]
      >
      >
      > Here is my test code:
      > *************** *************** *************** *************** ************
      > <html>
      > <head>
      > <script language="javas cript">
      > var phaseArray = new Array(4);
      > var phaseTypeId = new Array(4);
      > var phaseId = new Array(4);
      >
      > phaseArray[0] = "Define";
      > phaseId[0] = "phs_2003000000 01";
      > phaseTypeId[0] = "pht_2003000000 01";
      >
      > phaseArray[1] = "Measure";
      > phaseId[1] = "phs_2003000000 02";
      > phaseTypeId[1] = "pht_2003000000 01";
      >
      > phaseArray[2] = "Analyze";
      > phaseId[2] = "phs_2003000000 03";
      > phaseTypeId[2] = "pht_2003000000 01";
      >
      > phaseArray[3] = "Project Start-Up";
      > phaseId[3] = "phs_2003000000 06";
      > phaseTypeId[3] = "pht_2003000000 02";
      >
      > function populateMenu(s) {
      > var i=0,j=1;
      > document.overvi ew.phase.option s.length = 1; //delete current
      > options
      > document.overvi ew.phase.option s[0].selected = true;
      > for (var i=0; i<phaseArray.le ngth; i++){
      > if(s == phaseTypeId[i]) {[/color]

      // any 1st option ? to give a kind of title ...
      /*
      [color=blue]
      > document.overvi ew.phase.option s.length = j;
      > document.overvi ew.phase.option s[j] = new Option(phaseArr ay[i]);
      > document.overvi ew.phase.option s[j].value = phaseId[i];
      > if("phs_2003000 00006" == phaseId[i])
      > document.overvi ew.phase.option s[j].selected = true;[/color]
      [color=blue]
      > j++;[/color]

      */
      with(document.o verview.phase.o ptions[i+1]){
      value = phaseId[i];
      text = phaseArray[i];
      if("phs_2003000 00006" == phaseId[i]) selected = true;
      }
      // would be enough
      [color=blue]
      > }
      > }
      > }
      >
      > </script>
      > </head>
      > <body>
      >
      > <form name="overview" id="overview" action="test2.j sp"
      > method="post">
      > <select name="phaseType "
      > onChange="popul ateMenu(documen t.overview.phas eType.options[document.overvi ew.phaseType.op tions.selectedI ndex].value);">[/color]

      onChange="popul ateMenu(this.fo rm.options[this.form.optio ns.selectedInde x].value);">
      [color=blue]
      > <option value="pht_2003 00000001">Phase 1</option>
      > <option selected value="pht_2003 00000002">Phase 2</option>
      > </select><br />
      > <select name="phase" id="phase" style="width:10 0px;">
      > <option></option>
      > </select>
      > </form>
      > <script>populat eMenu("phs_2003 00000006");</script>
      >
      > </body>
      > </html>
      > *************** *************** *************** *************
      > Thanks[/color]

      --
      *************** *************** *************** *************** **
      Stéphane MORIAUX : mailto:stephane OTER-MOImoriaux@wana doo.fr
      Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
      http://perso.wanadoo.fr/stephanemoriaux/internet/

      *************** *************** *************** *************** **


        Comment

        Previous template Next
        Working...