0

我设法使用 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>

它工作正常。现在我想将onchange事件和id添加到第三个下拉列表中。即，对于区域列表，id 是 id1，onchange函数是 function(f1)，对于圆形列表，id 是 id2，onchange函数是 function(f2)，依此类推。任何人都请帮助我使用 Javascript 添加此 ID 和功能。

4

1 回答 1

0

似乎实际的答案是

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

和

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

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

Struggling a little bit with the resetting of the selects when a select up the chain was changed. 也许在我可以递归的地方需要重写，但我不能很好地递归；）

小提琴

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'}
        ]
      }
    ]
  }
];
于 2012-06-18T14:24:49.277 回答