Creating onchange event and select list id using javascript

Question

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. ie, 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. Thank you all in advance.

You want to do it with javascript only or jquery can be used??
What do you want the third one to do? You really should investigate JSON and shorten your script using this as in onchange="setOptions(this[this.selectedIndex].value,this.form.opttwo);"
I want to load the options in third dropdown using onchange event. Also i want to give id to that dropdown list.
Right now, options are loaded in third dropdown, as i checked your code (jsfiddle.net/XugAx) and you can assign ID to that dropdown.

mplungjan · Accepted Answer · 2012-06-19 15:02:35Z

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'}
        ]
      }
    ]
  }
];

Thank u for the code. Now i want to dynamically load the map by giving onchange event to the third dropdown. Can u please help me??? The map link is here: groups.google.com/group/fusion-tables-users-group/attach/… and my dropdown menu of the code given in this question is here: jsfiddle.net/XugAx
I managed to edit upto this level. Code is here: jsfiddle.net/rVLNA and full result is here: jsfiddle.net/rVLNA/embedded/result Try to select different sections in the third dropdown in the result and see how the map is loading. In the same way, I want to load other dropdown (zone, circle, etc) also using onchange event. But i confused where to add the element.setAttribute("onchange", function(){somefuction();}); and element.setAttribute("id", myid); to my code.
I am so sorry, I really do not understand your question. - I would assign all onload handlers in the head: document.getElementById("someId").onchange=function() {...} Please see my fiddle in the answer
Ok.. I'l explain again. This is my code :jsfiddle.net/XugAx Now on selecting first dropdown, the corresponding options in the second will trigger and when selecting options in second dropdown the corresponding values in third dropdown will trigger, right? For example, in my code, zone, circle, division, etc list will load in 2nd when selecting office heirarchy, in 1st dropdown. Similarly, when selecting zone in 2nd dropdown All zones, Mangalore will load. Or when selecting the circle circle list will load. And it is done by onchange event. right?

asked	9 months ago
viewed	546 times
active	8 months ago

Creating onchange event and select list id using javascript

1 Answer

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript javascript-events drop-down-menu or ask your own question.

Hello World!

Creating onchange event and select list id using javascript

1 Answer

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript javascript-events drop-down-menu or ask your own question.

Hello World!

Related