Fatal编程技术网
  • javascript/
  • 使用Javascript创建onchange事件并选择列表id

使用Javascript创建onchange事件并选择列表id

javascript drop-down-menu

使用Javascript创建onchange事件并选择列表id,javascript,drop-down-menu,dom-events,Javascript,Drop Down Menu,Dom Events,我使用Javascript代码创建了一个动态的三个下拉列表，如下所示： <html> <head> <script type="text/javascript"> function setOptions(chosen, selbox) { selbox.options.length = 0; if (chosen == " ") { selbox.options[selbox.options.length] = new

我使用Javascript代码创建了一个动态的三个下拉列表，如下所示：

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


功能设置选项（已选择，选择框）{
selbox.options.length=0；
如果（已选择==“”）{
selbox.options[selbox.options.length]=新选项（'请选择上面第一个选项之一'，''）；
setTimeout（setOptions（“”，document.myform.optthree），5）；
}
如果（所选==“1”）{
selbox.options[selbox.options.length]=新选项（'--Select--'，11'）；
选项[selbox.options.length]=新选项（'Zone'，'12'）；
选项[selbox.options.length]=新选项（'Circle'，'13'）；
selbox.options[selbox.options.length]=新选项（'Division'，'14'）；
selbox.options[selbox.options.length]=新选项（'Sub Division'，'15'）；
selbox.options[selbox.options.length]=新选项（'Section'，'16'）；
setTimeout（setOptions（'11'，document.myform.optthree），5）；
}
如果（所选==“2”）{
selbox.options[selbox.options.length]=新选项（'--Select--'，21'）；
selbox.options[selbox.options.length]=新选项（'District'，'22'）；
selbox.options[selbox.options.length]=新选项（'Taluk'，'23'）；
选项[selbox.options.length]=新选项（'Hobli'，'24'）；
selbox.options[selbox.options.length]=新选项（'Village'，'25'）；
setTimeout（setOptions（'21'，document.myform.optthree），5）；
}
如果（所选==“11”）{
selbox.options[selbox.options.length]=新选项（'请选择上面第一个选项之一'，''）；
}
如果（所选==“12”）{
selbox.options[selbox.options.length]=新选项（'--All Zones--'，''；
选项[selbox.options.length]=新选项（'Mangalore'，'Mangalore'）；
}
如果（所选==“13”）{
selbox.options[selbox.options.length]=新选项（'--All Circles--'，''）；
选项[selbox.options.length]=新选项（'Mangalore'，'Mangalore'）；
selbox.options[selbox.options.length]=新选项（'Udupi'，'Udupi'）；
}
如果（所选==“14”）{
selbox.options[selbox.options.length]=新选项（'--All Divisions--'，''）；
选项[selbox.options.length]=新选项（'Mangalore'，'Mangalore'）；
selbox.options[selbox.options.length]=新选项（'Bantwal'，'Bantwal'）；
selbox.options[selbox.options.length]=新选项（'Udupi'，'Udupi'）；
选项[selbox.options.length]=新选项（'Kundapur'，'Kundapur'）；
}
如果（所选==“15”）{
selbox.options[selbox.options.length]=新选项（'--All Sub division--'，''）；
选项[selbox.options.length]=新选项（'Attavara'，'Attavara'）；
selbox.options[selbox.options.length]=新选项（'mannaugdda'，'mannaugdda'）；
selbox.options[selbox.options.length]=新选项（'Bantwal'，'Bantwal'）；
选项[selbox.options.length]=新选项（'Vittal'，'Vittala'）；
selbox.options[selbox.options.length]=新选项（'Udupi'，'Udupi'）；
selbox.options[selbox.options.length]=新选项（'Manipal'，'Manipal'）；
选项[selbox.options.length]=新选项（'Kundapur'，'Kundapur'）；
选项[selbox.options.length]=新选项（'Brahmavar'，'Brahmavar'）；
}
如果（所选==“16”）{
selbox.options[selbox.options.length]=新选项（'--All Sections--'，''）；
selbox.options[selbox.options.length]=新选项（'Section 1'，'Section 1'）；
selbox.options[selbox.options.length]=新选项（'Section 2'，'Section 2'）；
selbox.options[selbox.options.length]=新选项（“第3节”、“第3节”）；
selbox.options[selbox.options.length]=新选项（“第4节”、“第4节”）；
selbox.options[selbox.options.length]=新选项（“第5节”、“第5节”）；
selbox.options[selbox.options.length]=新选项（“第6节”、“第6节”）；
selbox.options[selbox.options.length]=新选项（“第7节”、“第7节”）；
selbox.options[selbox.options.length]=新选项（“第8节”、“第8节”）；
selbox.options[selbox.options.length]=新选项（“第9节”、“第9节”）；
selbox.options[selbox.options.length]=新选项（“第10节”、“第10节”）；
selbox.options[selbox.options.length]=新选项（“第11节”、“第11节”）；
selbox.options[selbox.options.length]=新选项（“第12节”、“第12节”）；
selbox.options[selbox.options.length]=新选项（“第13节”、“第13节”）；
selbox.options[selbox.options.length]=新选项（“第14节”、“第14节”）；
selbox.options[selbox.options.length]=新选项（“第15节”、“第15节”）；
selbox.options[selbox.options.length]=新选项（“第16节”、“第16节”）；
}
如果（所选==“21”）{
selbox.options[selbox.options.length]=新选项（'请选择上面第一个选项之一'，''）；
}
如果（所选==“22”）{
selbox.options[selbox.options.length]=新选项（'--All Districts--'，''）；
selbox.options[selbox.options.length]=新选项（'District 1'，'District 1'）；
}
如果（所选==“23”）{
selbox.options[selbox.options.length]=新选项（'--All-Taluks--'，''）；
selbox.options[selbox.options.length]=新选项（'Taluk 1'，'Taluk 1'）；
}
如果（所选==“24”）{
selbox.options[selbox.options.length]=新选项（'--All-Hoblis--'，''）；
selbox.options[selbox.options.length]=新选项（'hobli1'，'hobli1'）；
}
如果（所选=“25”）{
selbox.options[selbox.options.length]=新选项（'--All village--'，''）；
selbox.options[selbox.options.length]=新选项（'Village 1'，'Village 1'）；
}
}
官位继承权
地理继承权



请先选择上面的选项之一



请先选择上面的选项之一
它很好用。现在我想将
onchange
事件和id添加到第三个下拉列表中。i、 例如，对于区域列表id为id1，
onchange
函数为函数（f1），对于圆列表id为id2，
onchange
函数为函数（f2），依此类推。任何人请帮助我使用Javascript添加此id和函数。

实际答案似乎是

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

关于我在等待信息时做的其他事情，请看这里：

当链上的一个选择被更改时，在重置选择上有点困难。也许我需要重写一下 
document.getElementsByName("optthree")[0].id=".."

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