Jump to content

Multiple SELECT Drop Down

DaNuGai

By DaNuGai
in JavaScript

Recommended Posts

DaNuGai Newbie

DaNuGai

Posted
Posted

I have Three <SELECT> drop down menu in my form. I was wondering how I can make it so when people choose a certain option in the 1st drop down menu, they get a different list in second drop down menu and so on. I would also like the 2nd menu to be disabled until the first one is choosen and 3rd to be disabled until 1st and 2nd is choosen. I have something similar to the following code below.

<SELECT SIZE="1" NAME="County"  <OPTION VALUE="">- Select County -</OPTION>  <OPTION VALUE="">County 1</OPTION>  <OPTION VALUE="">County 2</OPTION>  </SELECT><SELECT SIZE="1" NAME="School">  <OPTION VALUE="">- Select School-</OPTION>  <OPTION VALUE="">School 1</OPTION>  <OPTION VALUE="">School 2</OPTION>  </SELECT><SELECT SIZE="1" NAME="Teacher">  <OPTION VALUE="">- Select Teacher-</OPTION>  <OPTION VALUE="">Teacher 1</OPTION>  <OPTION VALUE="">Teacher 2</OPTION>  </SELECT>

Link to comment
Share on other sites
nuwandias Newbie

nuwandias

Posted
Posted

<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>New Page 1</title><script type="text/javascript"> function setTextInfields(selectList){ for(j=0; j<5; j++){ selectList.options[j] = new Option('Teacher '+j,'t'+j); //new Option('text','value'), takes in the text and value as parameters. } } function populateSecondList(frm){ frm.select2.disabled = false; setTextInfields(frm.select2); } function disableList(){ document.myForm.select2.disabled = true; }</script></head><body onload = "disableList()"><form name="myForm"><select id="select1" name="select1" onchange="populateSecondList(this.form)"><option value="s1" id="s1">School 1</option><option value="s2" id="s2">School 2</option></select><select id="select2" name="select2"><option value="t1" id="t1">Teacher 1</option><option value="t2" id="t2">Teacher 2</option></select></form></body></html>-------------------------------------------------------------------------------------------------------------------------------------------------------------Try out the given example above. You could use something similar to get your task done. Copy and paste the code above as a new html page and select a different value from the School list and check what happens. Then go through the code and try to understand what happens. You will be able to use a similar code for your task.RegardsNuwan

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...