JavaScript 성,시,현 3 급 연결 특수효과 실현

본 논문 의 사례 는 여러분 에 게 js 성 시 현 3 급 연결 효과 의 실현 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
주요 사상
1.성 변경,시 변경,현 초기 화
2.시 변경,현 변경
html 코드

<select id="sheng">
 <option value="">--   --</option>
 <option value="0">   </option>
 <option value="1">   </option>
 <option value="2">   </option>
 <option value="3">      </option>
</select>
<select id="shi">
 <option value="">--   --</option>
</select>
<select id="xian">
 <option value="">--   --</option>
</select>

주요 절차
1.원소 대상 가 져 오기

var sheng = document.getElementById('sheng');
var shi = document.getElementById('shi');
var xian = document.getElementById('xian');

2.시 와 현의 배열 을 정의 한다.

  var city = [
   ['   ', '   ', '   ', '   '],
   ['    ', '   ', '    ', '   '],
   ['   ', '   ', '   ', '   '],
  ['     ', '   ', '     ', '   ']
 ];
  var xians = [
  [
    ['   ','   ','  '],
    ['   ','   ','   '],
    ['  1','  2','  3'],
    ['  1','  2','  3'],
  ],
  [
   ['   ','   ','   '],
   ['   ','  ','  '],
  ]
 ];

3.전역 변수 정의

var index = null;

4.성의 변 화 를 실현 하고 시의 변화 에 따 른 효과

sheng.onchange = function() {
   xian.innerHTML = '<option value="">--   --</option>';//    xian
   index = this.value; //   option  
   var result = city[index];//  index city        shi
   //          select#shi ，  result    "    "，       option  
   var str = '<option value="">--   --</option>';
   for (var i = 0; i < result.length; i++) {
   //                   
   str += '<option value="'+i+'">' + result[i] + '</option>';
   }
   shi.innerHTML = str;//       select#shi 
 }

5.시의 변 화 를 실현 하고 현의 효 과 를 얻는다.

shi.onchange = function(){
 var value = this.value; //      value   
 var county = xians[index][value]; //           
 var str = '<option value="">--   --</option>';
 for (var i = 0; i < county.length; i++) {
  str += '<option value="'+i+'">' + county[i] + '</option>';
 }
 xian.innerHTML = str;//      select#xian 
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.