I managed to create a dynamic three dropdown list using Javascript code and it

Question

0

Asked: June 6, 20262026-06-06T05:10:10+00:00 2026-06-06T05:10:10+00:00

I managed to create a dynamic three dropdown list using Javascript code and it

0

I managed to create a dynamic three dropdown list using Javascript code and it is given below:

<html>
<head>
<script type="text/javascript">
function setOptions(chosen, selbox) {

selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
setTimeout(setOptions(' ',document.myform.optthree),5);
}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('--Select--','11');
selbox.options[selbox.options.length] = new Option('Zone','12');
selbox.options[selbox.options.length] = new Option('Circle','13');
selbox.options[selbox.options.length] = new Option('Division','14');
selbox.options[selbox.options.length] = new Option('Sub Division','15');
selbox.options[selbox.options.length] = new Option('Section','16');
setTimeout(setOptions('11',document.myform.optthree),5);
 }
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('--Select--','21');
selbox.options[selbox.options.length] = new Option('District','22');
selbox.options[selbox.options.length] = new Option('Taluk','23');
selbox.options[selbox.options.length] = new Option('Hobli','24');
selbox.options[selbox.options.length] = new Option('Village','25');
setTimeout(setOptions('21',document.myform.optthree),5);
}
if (chosen == "11") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
 }
if (chosen == "12") {
selbox.options[selbox.options.length] = new Option('--All Zones--',' ');
selbox.options[selbox.options.length] = new Option('Mangalore','Mangalore');
}
if (chosen == "13") {
selbox.options[selbox.options.length] = new Option('--All Circles--',' ');
selbox.options[selbox.options.length] = new Option('Mangalore','Mangalore');
selbox.options[selbox.options.length] = new Option('Udupi','Udupi');
  }
if (chosen == "14") {
selbox.options[selbox.options.length] = new Option('--All Divisions--',' ');
selbox.options[selbox.options.length] = new Option('Mangalore','Mangalore');
selbox.options[selbox.options.length] = new Option('Bantwal','Bantwal');
selbox.options[selbox.options.length] = new Option('Udupi','Udupi');
selbox.options[selbox.options.length] = new Option('Kundapur','Kundapur');
}
if (chosen == "15") {
selbox.options[selbox.options.length] = new Option('--All Sub Divisions--',' ');
selbox.options[selbox.options.length] = new Option('Attavara','Attavara');
selbox.options[selbox.options.length] = new Option('Mannagudda','Mannagudda');
selbox.options[selbox.options.length] = new Option('Bantwal','Bantwal');
selbox.options[selbox.options.length] = new Option('Vittal','Vittala');
selbox.options[selbox.options.length] = new Option('Udupi','Udupi');
selbox.options[selbox.options.length] = new Option('Manipal','Manipal');
selbox.options[selbox.options.length] = new Option('Kundapur','Kundapur');
selbox.options[selbox.options.length] = new Option('Brahmavar','Brahmavar');
}
if (chosen == "16") {
selbox.options[selbox.options.length] = new Option('--All Sections--',' ');
selbox.options[selbox.options.length] = new Option('Section 1','Section 1');
selbox.options[selbox.options.length] = new Option('Section 2','Section 2');
selbox.options[selbox.options.length] = new Option('Section 3','Section 3');
selbox.options[selbox.options.length] = new Option('Section 4','Section 4');
selbox.options[selbox.options.length] = new Option('Section 5','Section 5');
selbox.options[selbox.options.length] = new Option('Section 6','Section 6');
selbox.options[selbox.options.length] = new Option('Section 7','Section 7');
selbox.options[selbox.options.length] = new Option('Section 8','Section 8');
selbox.options[selbox.options.length] = new Option('Section 9','Section 9');
selbox.options[selbox.options.length] = new Option('Section 10','Section 10');
selbox.options[selbox.options.length] = new Option('Section 11','Section 11');
selbox.options[selbox.options.length] = new Option('Section 12','Section 12');
selbox.options[selbox.options.length] = new Option('Section 13','Section 13');
selbox.options[selbox.options.length] = new Option('Section 14','Section 14');
selbox.options[selbox.options.length] = new Option('Section 15','Section 15');
selbox.options[selbox.options.length] = new Option('Section 16','Section 16');
}
 if (chosen == "21") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
 }
 if (chosen == "22") {
selbox.options[selbox.options.length] = new Option('--All Districts--',' ');
selbox.options[selbox.options.length] = new Option('District 1','District 1');
 }
if (chosen == "23") {
selbox.options[selbox.options.length] = new Option('--All Taluks--',' ');
selbox.options[selbox.options.length] = new Option('Taluk 1','Taluk 1');
 }
if (chosen == "24") {
selbox.options[selbox.options.length] = new Option('--All Hoblis--',' ');
selbox.options[selbox.options.length] = new Option('Hobli 1','Hobli 1');
 }
if (chosen == "25") {
selbox.options[selbox.options.length] = new Option('--All Villages--',' ');
selbox.options[selbox.options.length] = new Option('Village 1','Village 1');
}
 }
 </script>
</head>


 <body>

    <form name="myform">

  <select name="optone" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value,document.myform.opttwo);">
  <option value=" " selected="selected"> </option>
  <option value="1">Office Heirarchy</option>
  <option value="2">Geographical Heirarchy</option>
     </select><br> <br>

   <select name="opttwo" onchange="setOptions(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value,document.myform.optthree);">
    <option value=" " selected="selected">Please select one of the options above first</option>
   </select><br> <br>

  <select name="optthree">
     <option value=" " selected="selected">Please select one of the options above first</option>
   </select><br> <br>

    </form>

  </body>
    <html>

It works fine. Now I want to add the onchange event and id to the third dropdown list. i.e., for zone list id is id1 and onchange function is function(f1), and for circle list id is id2 and onchange function is function(f2) and so on. Anyone please help me to add this id and function using Javascript.

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-06T05:10:11+00:00

Seems the actual answer was

document.getElementsByName("optthree")[0].onchange=function() { changeMap4(this.value)}

and

document.getElementsByName("optthree")[0].id=".."

For other stuff I did while waiting for information look here:

Struggling a little bit with the resetting of the selects when a select up the chain was changed. Maybe a rewrite is needed where I can recurse, but I do not recurse well 😉

FIDDLE

var sels = [
  { text:"Please select",value:"",subs:[]},
  { text:"Office Hierarchy",
    value:1,
    subs: [
          { text:'--Select--', value:'11', subs:[{ text:'Please select one of the options above first', value:' '}]},
          { text:'Zone', value:'12', 
            subs:[ 
              { text:'--All Zones--', value:' '},
              { text:'Mangalore', value:'Mangalore'}
              ]
          },
          { text:'Circle', value:'13', 
            subs:[
              { text:'--All Circles--', value:' '},
              { text:'Mangalore', value:'Mangalore'},
              { text:'Udupi', value:'Udupi'}
              ]
          },
          { text:'Division', value:'14', 
            subs:[              
              { text:'--All Divisions--', value:' '},
              { text:'Mangalore', value:'Mangalore'},
              { text:'Bantwal', value:'Bantwal'},
              { text:'Udupi', value:'Udupi'},
              { text:'Kundapur', value:'Kundapur'}
            ]
          },
          { text:'Sub Division', value:'15',
            subs:[
              { text:'--All Sub Divisions--', value:' '},
              { text:'Attavara', value:'Attavara'},
              { text:'Mannagudda', value:'Mannagudda'},
              { text:'Bantwal', value:'Bantwal'},
              { text:'Vittal', value:'Vittala'},
              { text:'Udupi', value:'Udupi'},
              { text:'Manipal', value:'Manipal'},
              { text:'Kundapur', value:'Kundapur'},
              { text:'Brahmavar', value:'Brahmavar'}              
            ]
          },
          { text:'Section', value:'16',
            subs:[
              { text:'--All Sections--', value:' '},
              { text:'Section 1', value:'Section 1'},
              { text:'Section 2', value:'Section 2'},
              { text:'Section 3', value:'Section 3'},
              { text:'Section 4', value:'Section 4'},
              { text:'Section 5', value:'Section 5'},
              { text:'Section 6', value:'Section 6'},
              { text:'Section 7', value:'Section 7'},
              { text:'Section 8', value:'Section 8'},
              { text:'Section 9', value:'Section 9'},
              { text:'Section 10', value:'Section 10'},
              { text:'Section 11', value:'Section 11'},
              { text:'Section 12', value:'Section 12'},
              { text:'Section 13', value:'Section 13'},
              { text:'Section 14', value:'Section 14'},
              { text:'Section 15', value:'Section 15'},
              { text:'Section 16', value:'Section 16'}
            ]
          }
       ]              
   },
  { text:"Geographical Heirarchy",
    value:2,
    subs: [
      { text:'--Select--', value:'21', subs:[{ text:'Please select one of the options above first', value:' '}]},
      { text:'District', value:'22',
        subs:[
          { text:'--All Districts--', value:' '},
          { text:'District 1', value:'District 1'}
        ]
      },
      { text:'Taluk', value:'23',
        subs:[
          { text:'--All Taluks--', value:' '},
          { text:'Taluk 1', value:'Taluk 1'}                
        ]
      },
      { text:'Hobli', value:'24',
        subs:[
          { text:'--All Hoblis--', value:' '},
          { text:'Hobli 1', value:'Hobli 1'}
        ]
      },
      { text:'Village', value:'25',
        subs:[
          { text:'--All Villages--', value:' '},
          { text:'Village 1', value:'Village 1'}
        ]
      }
    ]
  }
];

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I managed to create a dynamic three dropdown list using Javascript code and it

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply