這篇文章主要介紹了JS三級聯動代碼格式實例詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
實現js多級聯動的代碼格式
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
省份<select id="pro" onchange="getcity()"> <!--創造三個下拉選項欄-->
<option>選擇省份</option>
</select>
城市<select id="city" onchange="getarea()">
<option>選擇城市</option>
</select>
區<select id="area">
<option>選擇區</option>
</select>
</body>
</html>
<script type="text/javascript">
var sheng = ["湖北省", "湖南省", "廣東省"];
var city = [["武漢市", "宜昌市", "咸寧市"], ["長沙市", "常德市", "邵陽市"], ["廣州市", "深圳市", "惠州市"]]
var ar = [[["武昌區", "洪山區"], ["夷陵區"], ["咸安區"]], [["芙蓉區"], ["鼎城區"], ["雙清區"]], [["荔灣區"], ["福田區"], ["惠陽區"]]]
window.onload = start;
var s = document.getElementById("pro"); //設置初始的省份選項
function start() {
for (var i = 0; i < sheng.length; i++) {
var op = document.createElement("option");
op.innerHTML = sheng[i];
s.appendChild(op); //添加幾個可選擇的省份到第一個選項下拉欄
}
}
var c = document.getElementById("city")
function getcity() {
c.length = 1;
var sw = s.selectedIndex;//找到省份位置，從而好使后面的城市與省份對應
var citys = city[sw - 1];
for (var j = 0; j < citys.length; j++) {
var op1 = document.createElement("option");
op1.innerHTML = citys[j];
c.appendChild(op1);
}
}
var a = document.getElementById("area")
function getarea() {
a.length = 1;
var sw = s.selectedIndex;//省份位置，與上一步中的sw一樣
var cw = c.selectedIndex;//城市位置
var citys = ar[sw - 1];//先把三維數組中的區域找出來，確定是哪個省里的幾個區
var ars = citys[cw - 1];//再w位置，把對應的區對應給相應的城市
for (var k = 0; k < ars.length; k++) {
var op2 = document.createElement("option");
op2.innerHTML = ars[k];
a.appendChild(op2);
}
}
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
