Dynamic drop down menu please help

Googy · Jan 1, 2008

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.

jcoder · Jan 2, 2008

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

David Mark · Jan 2, 2008

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);
}

Click to expand...

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';

Click to expand...

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='';

Click to expand...

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);

Click to expand...

See above.

Z-Index/Drop-down menu issues	2	Jun 4, 2023
Multiple drop down boxes with same options	0	Nov 30, 2006
dynamic drop down menu based on xml data	0	Jan 25, 2011
Needing Help With My First JavaScript script	1	Mar 22, 2018
Multiple drop down boxes with same options	4	Nov 30, 2006
Drop Down Box creates text	0	Mar 7, 2006
Drop down menu	6	May 21, 2008
Value from Dynamic drop down select	1	Dec 2, 2008

Dynamic drop down menu please help

Googy

jcoder

David Mark

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads