일반 웹 페이지의 모든 곳에서는 2 단계 연계를 볼 수 있으며, 일반적으로 Zhejiang Province를 클릭 한 다음 Hangzhou City 및 Jiaxing City와 같은 주소가 있습니다. 항저우와 jiaxing 대신 베이징 지방, 차유 및 하이디 안을 클릭하십시오.
이 단계를 구현하려면 JavaScript를 사용하여 구현해야합니다. 원리는 onchange 시간을 사용합니다.
먼저, 도메인의 내용이 변경 될 때 OnChange 이벤트가 발생합니다. 이 이벤트를 지원하는 JavaScript 객체 : FileUpload, Select, Text, TextRea. 우리는 Select를 사용하여 2 차 연결 구현을 완료합니다.
다음은 HTML 코드입니다. 먼저, 선택을 지방으로 설정하고 두 번째는 도시로 선택하지만 JS의 배열을 사용하여 지방과 연결합니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> javaScript 보조 연결 </title>
</head>
<body>
<id = "province"를 선택하십시오
<옵션 값 = "-1"> 주제 </옵션>
<옵션 값 = "0"> 베이징 </옵션>
<옵션 값 = "1"> Zhejiang </옵션>
</선택>
<id = "City"를 선택하십시오
</선택>
<script src = "../ js/province.js"> </script>
</body>
</html>
다음은 JS 코드입니다
코드 사본은 다음과 같습니다.
var Province = document.getElementById ( "Province");
var city = document.getElementById ( "City");
var area = [
[ 'Chaoyang', 'Haidian', 'Beijing'], // 0 번째 지역의 배열. 0 {0,1,2}
[ 'hangzhou', 'haining'] // 첫 번째 영역의 배열, 1 {0.1}
];
함수 선택 () {
var opt = "";
var len = 지역 [province.value]; // 베이징 0이 선택되면 len = [ 'chaoyang', 'haidian'] 이것은 <span style = "back
if (province.value == '-1') {// select의 값이 -1 일 때 베이징이 아닌 '지방'이므로이 지방을 선택하면 도시가 비어 있음을 의미합니다.
city.innerhtml = opt;
}
for (var i = 0; i <len.length; i ++) {// 영역 배열 수 (i = 0; i <3; i ++)
opt = opt + '<옵션 값 = "' + i + '">' + len [i] + '</옵션>'// opt = "" + <옵션 값 = "0"> chaoyang (lin [0]) </옵션>,
// opt = <옵션 값 = "0"> Chaoyang (Lin [0]) </옵션>, + <br>
<옵션 값 = "1"> haidian (lin [1]) </옵션>
// opt = <옵션 값 = "0"> Chaoyang (Lin [0]) </옵션>, + <br>
<옵션 값 = "1"> haidian (lin [1]) </옵션> + <br>
<옵션 값 = "2"> 베이징 (Lin [2]) </옵션>
}
city.innerhtml = opt;
}
Province.onchange = function () {
선택하다();
}
일반 웹 페이지의 모든 곳에서는 2 단계 연계를 볼 수 있으며, 일반적으로 Zhejiang Province를 클릭 한 다음 Hangzhou City 및 Jiaxing City와 같은 주소가 있습니다. 항저우와 jiaxing 대신 베이징 지방, 차유 및 하이디 안을 클릭하십시오.
이 단계를 구현하려면 JavaScript를 사용하여 구현해야합니다. 원리는 onchange 시간을 사용합니다.
위는이 기사의 전체 내용입니다. 나는 당신이 그것을 좋아하기를 바랍니다.