Dynamic drop down menu please help

Discussion in 'Javascript' started by Googy, Jan 1, 2008.

  1. Googy

    Googy Guest

    I Want to generate dynamic values in a drop down menu based on the
    selection of another drop down menu. Following are my html snippet and
    my javascript code.

    HTML Snippet
    <select name = "events" id = "events" class="fValidate['required']"
    title='Select an event for which you want to register'>
    <option value = "">Select an event</option>
    <option value = "embryo">Embryo</option>
    <option value = "combatant">Combatant</option>
    <option value = "madeitmyself">Made It Myself</option>
    <option value = "dawarrior">Da Warrior</option>
    <option value = "dumbcharades">Isharon hi Isharon me</option>
    <option value = "drishya">Drishya</option>
    <option value = "raganight">Raga Night</option>
    <option value = "entrapment">Entrapment</option>
    <option value = "formulazero">Formula Zero</option>
    <option value = "jam">Jam</option>
    <option value = "goalgo">Go Algo</option>
    <option value = "bootstrapping">Boot Strapping</option>
    <option value = "metallica">Metallica</option>
    <option value = "bguru">B-Guru</option>
    <option value = "wrongturn">Wrong Turn</option>
    <option value = "footloose">Foot Loose</option>
    <option value = "adaa">Adaa</option>
    <option value = "subito">Subito</option>
    <option value = "bestsellers">Best Sellers</option>
    <option value = "antakshari">Antakshari</option>
    </select>
    <select name = "team" id = "team" class="fValidate['required']"
    title='Select the size of team'>
    <option value="">Team Size</option>
    </select>

    Javascript code

    window.onload = initForm;

    function initForm() {
    document.getElementById("events").selectedIndex = 0;
    document.getElementById("events").onchange = populateTeamsize;
    }

    function populateTeamsize() {
    var teamsize = new Array(1,1,5,1,5,10,3,3,3,2,2,1,2,2,1,2,8,2,2,6);
    var teamStr = this.options[this.selectedIndex].value;

    var index;
    if (teamStr != "") {

    switch(teamStr) {
    case "embryo" :
    index = 0;
    break;
    case "combatant" :
    index = 1;
    break;
    case "madeitmyself" :
    index = 2;
    break;
    case "dawarrior" :
    index = 3;
    break;
    case "dumbcharades" :
    index = 4;
    break;
    case "drishya" :
    index = 5;
    break;
    case "raganight" :
    index = 6;
    break;
    case "entrapment" :
    index = 7;
    break;
    case "formulazero" :
    index = 8;
    break;
    case "jam" :
    index = 9;
    break;
    case "goalgo" :
    index = 10;
    break;
    case "bootstrapping" :
    index = 11;
    break;
    case "metallica" :
    index = 12;
    break;
    case "bguru" :
    index = 13;
    break;
    case "wrongturn" :
    index = 14;
    break;
    case "foorloose" :
    index = 15;
    break;
    case "adaa" :
    index = 16;
    break;
    case "subito" :
    index = 17;
    break;
    case "bestsellers" :
    index = 19;
    break;
    case "antakshari" :
    index = 20;
    break;

    }


    document.getElementById("team").options.length = 0;
    for(var i=0; i<teamsize[index]; i++) {
    document.getElementById("team").options = new Option(i+1);
    }
    }
    }

    But the problem is that dymaic numbers are not generated in second
    drop down menu after selecting an option from first one ...

    Please help i am not getting the error in my code, if any one can
    debug it please answer.
     
    Googy, Jan 1, 2008
    #1
    1. Advertising

  2. Googy

    jcoder Guest

    this may not be the total solution..but i hope somehow it can
    englighten you:
    //---------------------------------------------------------------------//

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <title></title>
    <style type="text/css">
    ..model{
    visibility: hidden;
    }
    </style>
    </head>
    <body>

    <div id="brand">
    <select id="sel_brand" size="1" onchange="show_model()"></select>
    </div>

    <div id="model" class="model">
    <select id="sel_model" size="1"></select>
    </div>


    <script language="JavaScript" type="text/javascript">
    var fon={
    brand:[{name:'nokia',
    model:[{name:'3230'},
    {name:'3310'},
    {name:'7260'}
    ]
    },
    {name:'samsung',
    model:[{name:'s6'},
    {name:'s7'},
    {name:'s1'}
    ]
    },
    {name:'motorola',
    model:[{name:'l6'},
    {name:'l7'},
    {name:'v3i'}
    ]
    }]
    }; //fon

    window.onload=function(){
    var x=document.getElementById('sel_brand');
    for(i=0; i<=(fon.brand.length-1); i++){
    var o=document.createElement('option');
    o.value=i;
    o.innerHTML=fon.brand.name;
    x.appendChild(o);
    }
    }//endf

    function show_model(){
    var x=document.getElementById('sel_brand');
    document.getElementById('model').style.visibility='visible';
    var m=document.getElementById('sel_model');
    m.innerHTML='';
    for(i=0;i<=(fon.brand[x.value].model.length-1); i++){
    var o=document.createElement('option');
    o.value=fon.brand[x.value].model.name;
    o.innerHTML=fon.brand[x.value].model.name;
    m.appendChild(o);
    }
    }//show_model
    </script>
    </body>
    </html>

    //---------------------------------------------------------------------//
    end of code
     
    jcoder, Jan 2, 2008
    #2
    1. Advertising

  3. Googy

    David Mark Guest

    On Jan 2, 1:00 am, jcoder <> wrote:
    > this may not be the total solution..but i hope somehow it can
    > englighten you:


    It will not enlighten anybody.

    > //---------------------------------------------------------------------//
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    >     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    XHTML transitional? You wouldn't want to serve this as XHTML. And
    what are you transitioning from?

    >
    > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    >
    > <head>
    > <title></title>
    > <style type="text/css">
    > .model{
    >  visibility: hidden;}


    Don't do that. There is no guarantee that the script will be able to
    make it visible.

    >
    > </style>
    > </head>
    > <body>
    >
    > <div id="brand">
    > <select id="sel_brand" size="1" onchange="show_model()"></select>


    Where are the options? And the show_model function is not yet
    defined.

    > </div>
    >
    > <div id="model" class="model">
    > <select id="sel_model" size="1"></select>
    > </div>


    If CSS is disabled or not available, this will be visible.

    >
    > <script language="JavaScript" type="text/javascript">


    Don't use the language attribute. We just went over that.

    > var fon={
    >  brand:[{name:'nokia',
    >          model:[{name:'3230'},
    >                 {name:'3310'},
    >                 {name:'7260'}
    >                ]
    >         },
    >         {name:'samsung',
    >          model:[{name:'s6'},
    >                 {name:'s7'},
    >                 {name:'s1'}
    >                ]
    >         },
    >         {name:'motorola',
    >          model:[{name:'l6'},
    >                 {name:'l7'},
    >                 {name:'v3i'}
    >                ]
    >         }]
    >
    > }; //fon
    >
    > window.onload=function(){
    >   var x=document.getElementById('sel_brand');


    Make sure x exists before proceeding.

    >   for(i=0; i<=(fon.brand.length-1); i++){
    >    var o=document.createElement('option');


    Use the Option constructor.

    >    o.value=i;
    >    o.innerHTML=fon.brand.name;


    In any event, don't use innerHTML to set text.

    >    x.appendChild(o);
    >   }


    If scripting is disabled or unavailable, the user will be presented
    with one or two empty selects (depending on the availability of CSS.)

    >
    > }//endf
    >
    > function show_model(){
    >  var x=document.getElementById('sel_brand');
    >  document.getElementById('model').style.visibility='visible';


    Always test the result of gEBI. And always test whether the method is
    supported.

    And why would the model select be invisible before a change? The
    first brand has models.

    >  var m=document.getElementById('sel_model');
    >  m.innerHTML='';


    Remove the options by setting each to null.

    >  for(i=0;i<=(fon.brand[x.value].model.length-1); i++){
    >   var o=document.createElement('option');
    >   o.value=fon.brand[x.value].model.name;
    >   o.innerHTML=fon.brand[x.value].model.name;
    >   m.appendChild(o);


    See above.

    >  }}//show_model
    >
    > </script>
    > </body>
    > </html>
    >
    > //---------------------------------------------------------------------//
    > end of code
     
    David Mark, Jan 2, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    784
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,035
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    501
    msimmons
    Jul 16, 2009
  4. Replies:
    5
    Views:
    284
  5. Replies:
    3
    Views:
    297
Loading...

Share This Page