0

Javascriptコードを使用して動的な3つのドロップダウンリストを作成することができました。これを以下に示します。

<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を3番目のドロップダウンリストに追加します。つまり、ゾーンリストの場合は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=".."

情報を待っている間に私がした他のことについては、ここを見てください：

チェーンの選択が変更されたときに選択をリセットするのに少し苦労しました。たぶん、私が再帰できるところで書き直しが必要ですが、私はうまく再帰しません;）

フィドル

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 に答える