Double drop down list Example with Javascript
Example of Double drop down list , when selecting one drop drown list item automatically display the result of another drop down list. Blue Text represents the drop down item you can paste it on a html form., green text represents the java scripts items.
<select class="textfield" name="Class" onChange="changeFilesDMA()" size="width:120">
<option value="000" selected="selected">Select class of Certificate</option>
<option value="Class I">Class I
<option value="Class II">Class II
<option value="Class III" onclick="alert('ClassIII User need to be physically present')">Class III
</select>
<!-- this menu holds the files to go-->
<select name="menuFilesDMA" onChange="goDMA(this)" ">
//style="display:none;visibility:hidden;
<option value="none">
</option>
</select>
second example
<select class="textfield"name="State" onChange="changeFilesDMAA()" >
<option value="000" selected="selected">Select State</option>
<option value="ANDAMAN AND NICOBAR">ANDAMAN AND NICOBAR </option>
<option value="ANDHRA PRADESH">ANDHRA PRADESH</option>
<option value="ARUNACHAL PRADESH">ARUNACHAL PRADESH</option>
<option value="ASSAM">ASSAM</option>
<option value="BIHAR">BIHAR</option>
<option value="CHANDIGARH">CHANDIGARH</option>
<option value="CHHATISHGARH">CHHATISHGARH</option>
<option value="DELHI">DELHI</option>
<option value="GOA">GOA</option>
<option value="GUJARAT">GUJARAT</option>
<option value="HARYANA ">HARYANA </option>
<option value="HIMACHAL PRADESH">HIMACHAL PRADESH</option>
<option value="JAMMU AND KASHMIR ">JAMMU AND KASHMIR </option>
<option value="JHARKHAND">JHARKHAND</option>
<option value="KARNATAKA">KARNATAKA</option>
<option value="KERALA ">KERALA </option>
<option value="LAKHSWADEEP">LAKHSWADEEP</option>
<option value="MADHYA PRADESH">MADHYA PRADESH</option>
<option value="MAHARASHTRA">MAHARASHTRA</option>
<option value="MANIPUR">MANIPUR</option>
<option value="MEGHALAYA ">MEGHALAYA </option>
<option value="MIZORAM ">MIZORAM </option>
<option value="NAGALAND">NAGALAND</option>
<option value="ORISSA">ORISSA</option>
<option value="PONDICHERRY ">PONDICHERRY </option>
<option value="PUNJAB">PUNJAB</option>
<option value="RAJASTHAN">RAJASTHAN </option>
<option value="SIKKIM ">SIKKIM </option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="TRIPURA ">TRIPURA </option>
<option value="UTTARAKHAND">UTTARAKHAND</option>
<option value="UTTAR PRADESH ">UTTAR PRADESH </option>
<option value="WEST BENGAL ">WEST BENGAL </option>
</select>
<select name="menuFilesDMAA" onchange="goDMA(this)" >
//style="display:none;visibility:hidden
<option value="none"> </option>
</select>
<!-- this menu holds the files to go-->
------------------------------------------------------------------------------------------------
<script language="javascript">
<!--
//new Option("text","value")
//this code changes menus
function nullOptionsDMA(aMenu){
var tot=aMenu.options.length
for (i=0;i<tot;i++)
{
aMenu.options[i]=null
}
aMenu.options.length=0;
}
function MySubjectDMA0(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("G1");
options[0].selected=true
}
}
function MySubjectDMA1(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("G2");
options[0].selected=true
}
}
function MySubjectDMA2(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("G3");
options[0].selected=true
}
}
/* ####################### goDM() ####################### */
function goDMA(aMenu){
if (aMenu.options.value!="none")
{
location=aMenu.options[aMenu.selectedIndex].value
}
}
/* ####################### setUp ####################### */
function setUpDMA(){
with (document.frm_scr_det1) {
if (Class.selectedIndex==0){
Class.options[0].selected=true
menuFilesDMA.options[0].selected=true
}
if (Class.selectedIndex==1)
MySubjectDMA0(menuFilesDMA)
if (Class.selectedIndex==2)
MySubjectDMA1(menuFilesDMA)
if (Class.selectedIndex==3)
MySubjectDMA2(menuFilesDMA)
}
}
/* ####################### changeFiles ####################### */
function changeFilesDMA(){
aMenu=document.frm_scr_det1.Class
aMenu2=document.frm_scr_det1.menuFilesDMA
with (aMenu){
switch (selectedIndex) {
case 0:
aMenu2.options.length=0;
aMenu2.options[0]=
new Option("Pages appear here","none")
aMenu2.options[0].selected=true;
history.go(0)
break
case 1:
MySubjectDMA0(aMenu2)
aMenu2.options[0].text="G1"
break
case 2:
MySubjectDMA1(aMenu2)
aMenu2.options[0].text="G2"
break
case 3:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="G3"
break
case 4:
MySubjectDMA3(aMenu2)
aMenu2.options[0].text="Style Sheet Subjects"
break
}
}
}
//-->
</script>
<script language="javascript">
<!--
// state name
//new Option("text","value")
//this code changes menus
function nullOptionsDMA(aMenu){
var tot=aMenu.options.length
for (i=0;i<tot;i++)
{
aMenu.options[i]=null
}
aMenu.options.length=0;
}
function MySubjectDMA0(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("G1");
options[0].selected=true
}
}
function MySubjectDMA1(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("G2");
options[0].selected=true
}
}
function MySubjectDMA2(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("G3");
options[0].selected=true
}
}
/* ####################### goDM() ####################### */
function goDMA(aMenu){
if (aMenu.options.value!="none")
{
location=aMenu.options[aMenu.selectedIndex].value
}
}
/* ####################### setUp ####################### */
function setUpDMA(){
with (document.frm_scr_det1) {
if (State.selectedIndex==0){
State.options[0].selected=true
menuFilesDMAA.options[0].selected=true
}
if (State.selectedIndex==1)
MySubjectDMA0(menuFilesDMAA)
if (State.selectedIndex==2)
MySubjectDMA1(menuFilesDMAA)
if (State.selectedIndex==3)
MySubjectDMA2(menuFilesDMAA)
}
}
/* ####################### changeFiles ####################### */
function changeFilesDMAA(){
aMenu=document.frm_scr_det1.State
aMenu2=document.frm_scr_det1.menuFilesDMAA
with (aMenu){
switch (selectedIndex) {
case 0:
aMenu2.options.length=0;
aMenu2.options[0]=
new Option("Pages appear here","none")
aMenu2.options[0].selected=true;
history.go(0)
break
case 1:
MySubjectDMA0(aMenu2)
aMenu2.options[0].text="AN"
break
case 2:
MySubjectDMA1(aMenu2)
aMenu2.options[0].text="AP"
break
case 3:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="AR"
break
case 4:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="AS"
break
case 5:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="BR"
break
case 6:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="CHD"
break
case 7:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="CG"
break
case 8:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="DL"
break
case 9:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="GA"
break
case 10:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="GJ"
break
case 11:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="HR"
break
case 12:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="HP"
break
case 13:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="JK"
break
case 14:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="JH"
break
case 15:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="KA"
break
case 16:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="KL"
break
case 17:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="LK"
break
case 18:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="MP"
break
case 19:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="MH"
break
case 20:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="MN"
break
case 21:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="ML"
break
case 22:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="MZ"
break
case 23:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="NL"
break
case 24:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="OR"
break
case 25:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="PY"
break
case 26:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="PB"
break
case 27:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="RJ"
break
case 28:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="SK"
break
case 29:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="TN"
break
case 30:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="TR"
break
case 31:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="UK"
break
case 32:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="UP"
break
case 33:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="WB"
break
case 4:
MySubjectDMA3(aMenu2)
aMenu2.options[0].text="Style Sheet Subjects"
break
}
}
}
//-->