JavaScript로 만든 간단한 3 레벨 링키지, 매우 간단하고 실용적입니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<제목> </title>
</head>
<body>
주:
<id = "pre"onchange = "chg (this);">를 선택하십시오
<옵션 값 = "-1"> </옵션>을 선택하십시오
</선택>
도시:
<id = "city"onchange = "chg2 (this)";> </select>를 선택하십시오
구역:
<id = "영역"> </select>를 선택하십시오
</body>
<cript>
// 지방을 선언합니다
var pres = [ "Beijing", "Shanghai", "Shandong"]; // 배열을 직접 선언합니다
// 도시의 진술
var cities = [
[ "Dongcheng", "Changping", "Haidian"],
[ "Pudong", "High Zone"],
[ "Jinan", "Qingdao"]
];
var 영역 = [
[의 뜻
[ "Dongcheng1", "Dongcheng2", "Dongcheng3"],
[ "Changping 1", "Changping 2", "Changping 3"],
[ "Haidian 1", "Haidian 2", "Haidian 3"]]
],,
[의 뜻
[ "Pudong 1", "Pudong 2", "Pudong 3"],
[ "High Zone 1", "High Zone 2", "High Zone 3"]]
],,
[의 뜻
[ "Jinan 1", "Jinan 2"],
[ "Qingdao 1", "Qingdao 2"]
]]
]]
// 주에 대한 공개 위시를 설정합니다
var pindex = -1;
var preele = document.getElementById ( "pre");
var cityele = document.getElementById ( "City");
var areaele = document.getElementById ( "영역");
// 저장된 값을 먼저 설정합니다
for (var i = 0; i <pres.length; i ++) {
// 옵션 선언. <옵션 값 = "pres [i]"> pres [i] </옵션>
var op = 새로운 옵션 (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 <cs.length; i ++) {
var op = 새로운 옵션 (cs [i], i);
cityele.options.add (op);
}
for (var i = 0; i <as.length; i ++) {
var op = 새로운 옵션 ([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 <as.length; i ++) {
var op = 새로운 옵션 ([i], i);
AreaEle.options.add (op);
}
}
</스크립트>
</html>
위는이 기사의 전체 내용입니다. 나는 당신이 그것을 좋아하기를 바랍니다.