JS_javascript 기술로 간단한 3단계 연계 생성

자바스크립트로 만든 간단한 3단계 연결, 매우 간단하고 실용적입니다

코드 복사 코드는 다음과 같습니다.

          
>

주:
         
                                             <옵션 값="-1">선택하세요
> 도시:
           
구역:
          


//지방 명시
        var pres = ["Beijing", "Shanghai", "Shandong"] //배열 선언
직접 > >                  //도시를 명시하세요       var 도시 = [
              ["동성", "창핑", "하이뎬"],
>              ["지난", "칭다오"]
];
      var 영역 = [
                                                          ["동성 1", "동성 2", "동성 3"],
>                                ["Haidian1", "Haidian2", "Haidian3"]
],
                                                          ~ > 부터 ],
                                                          ["지남1", "지남2"],
                                ["칭다오 1호", "칭다오 2호"]
]
]
//지방의 공개 첨자 설정
        var pIndex = -1;
         var preEle = document.getElementById("pre");
         var cityEle = document.getElementById("city");
      var AreaEle = document.getElementById("area");
//지방 값을 먼저 설정
for (var i = 0; i //옵션을 선언합니다.Pres[i]
               var op = new Option(pres[i], i);
>                 preEle.options.add(op);
}
         기능 chg(obj) {
If (obj.value == -1) {
CityEle.options.length = 0;
AreaEle.options.length = 0;
            }
//값 가져오기
            var val = obj.value;
              pIndex = obj.value;
//ctiry
          var cs = 도시[val];
//기본 영역 가져오기
          var as = 지역[val][0];
                //시장 먼저 청산
               cityEle.options.length = 0;
AreaEle.options.length = 0;
for (var i = 0; i               var op = new Option(cs[i], i);
                    cityEle.options.add(op);
            }
for (var i = 0; i               var op = new Option(as[i], i);
AreaEle.options.add(op);
            }
}
         기능 chg2(obj) {
            var val = obj.selectedIndex;
          var as = 지역[pIndex][val];
AreaEle.options.length = 0;
for (var i = 0; i               var op = new Option(as[i], i);
AreaEle.options.add(op);
            }
}