Log in

View Full Version : drop down menu script


paldo
10-18-2010, 02:43 PM
I'm new with javascript. I would like to write a small example script with the following values:

Select a car type: audi or volvo
Select the model: audi model1,audi model2, volvo model1, volvo model2

When the model is selected the price will appear.

I suppose I have to work with drop down menus. The first drop down menu has the values 'audi' and 'volvo'. When selecting 'audi' or 'volvo' a second drop down menu shows audi model1, audi model2 or volvo model1,volvo model2. When selecting one of this values you get the price.

Any ideas, hint ? Thank you.
vwphillips
10-18-2010, 04:15 PM
<!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>
<script type="text/javascript">
/*<![CDATA[*/
var cars=[
['audi',['audi model1',300],['audi model2',400]],
['volvo',['volvo model1',500],['volvo model2',600]]
];

function SelectInit(ary,s1,s2,p){
s1=document.getElementById(s1);
s2=document.getElementById(s2);
p=document.getElementById(p);
for (var z0=0;z0<ary.length;z0++){
s1.options[s1.options.length]=new Option(ary[z0][0],z0);
}
s1.selectedIndex=0;
var nu=s2.options.length
s1.onchange=function(){ Select(this,ary,s1,s2,p,nu); }
s2.onchange=function(){ Select(this,ary,s1,s2,p,nu); }
}

function Select(sel,ary,s1,s2,p,nu){
p.value='';
if (sel==s1){
s2.options.length=nu;
if (ary[s1.value]){
for (var z0=1;z0<ary[s1.value].length;z0++){
s2.options[s2.options.length]=new Option(ary[s1.value][z0][0],ary[s1.value][z0][1]);
}
}
s2.selectedIndex=0;
}
else if (sel==s2&&s2.value!='X'){
p.value=s2.value;
}
}

</script>

</head>

<body>
<select id="S1" >
<option value="X" >Cars</option>
</select>
<select id="S2" >
<option value="X">Models</option>
</select>
<input id="Price" />

<script type="text/javascript">
/*<![CDATA[*/
SelectInit(cars,'S1','S2','Price');
/*]]>*/
</script>

</body>

</html>
paldo
10-19-2010, 04:12 PM
Thank you Philip. I like your script. I just change :

var cars=[
['audi',['model1','300 $'],['model2','400 $']],
['volvo',['model1','500 $'],['model2','600 $']]
];

I tried to add a new drop down menu ( with options, without options) but I mess up your script.

I would like to extend it to:

var cars=[
['audi',['audi', 'model1', 'without','300 $'],['audi','model1','with','350 $'],['audi',' model2',' without','400 $'],['audi',' model2',' with','450 $']],
['volvo',['volvo','model1','without','500 $'],['volvo','model1','with','550 $'],['volvo','model2','without','600 $'],['volvo','model2','with','650 $']]
];
So I have to add a new var s3. Can you help me again? By comparing the changes you will do I will be able to understand.

Thanks for your precious help.