Dynamic drop down menu please help

G

Googy

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.
 
J

jcoder

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
 
D

David Mark

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,905
Latest member
Kristy_Poole

Latest Threads

Top