首頁 > 開發者 > JavaScript
標籤：提前 函數 .com div 石家莊 ima pen json fun
JavaScript實現省市二級聯動
展示一下效果？
當我滑鼠點擊前面的省那一欄的時候後面市那一欄會出現相對應的下轄市
實現思路
1. 添加相對應的select容器
2. 然後添加資料
3. 將相應的資料賦值給對應的option控制項
方法的講解
Function（）函數 onchange();改變事件
筆者在這裡寫了一個關於河南與河北的簡單聯動
省市聯動
<body>
<select id=”province”></select>省
<select id=”city”></select>市 //建立select容器
//建立JavaScript樣式
<script type = ”text/javascript”>
Var data = {
“河南”:[“鄭州”,“開封”，“許昌”],
“河北”:[“石家莊”,”邯鄲”,”煙台”]
}
//建立json資料來源
Var Pro = document.getElementById(“province”); //建立省容器物件
For(var key in data) {
Var ProOption = document.createElemenent(“option”);//建立option控制項
ProOption.innerHTML = key;//為控制項賦值
Pro.appendChild(ProOption);//將控制項添加到相對應的容器中
}
Var City = document.getElementById(“province”); //建立市容器物件
Pro.onchange=function（）{/--建立事件--/
Var key = this.value; //建立key對象
Var citArr = data[key];//建立城市數組
City.innerHTML = “”;//為防止重複添加每一次執行清空容器
For(var i=0;i<citArr.length;i++){/--遍曆數組--/
Var citName = citArr[i];//取出城市名稱
Var CitOption = document.createElemenent(“option”);//建立城市控制項
CitOption.innerHTML = citName;//為控制項賦值
City.appendChild(CitOption);//將空間添加容器
}
}
Pro.onchange();//為讓容器有預設值提前調用方法一次
</body>
寫的不好請多指教：有疑問可留言
學習不易，請讀者多多分享。傳播知識正能量
</body>
JavaScript實現省市二級聯動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
