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

Code:

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

Thread: drop down menu script

Thread Tools

Search Thread

drop down menu script

Bookmarks

Bookmarks

Posting Permissions