JavaScript實現網頁下拉列表的省市聯動
阿新 • • 發佈：2021-09-08
大家好，今天我和大家分享中下拉列表的省市聯動。在我們平常填寫一些資訊時就會有省市聯動，就是在第一個下拉列表中選擇我們所在的省，後面一個下拉列表顯示該省的所有城市。
既然是省市聯動，我們就不能把資料直接寫到網頁上，我們應該通過第一個下拉列表的省動態生成該省的所有城市。我們可以先定義一個ON物件表示省，在物件中定義一個數組儲存一個省中的所有城市（這裡的城市也是JSON物件），最後用陣列儲存所有的省。我們可以利用在網頁上面新增選項option。聯動這塊我們可以為第一個下拉列表新增一個change事件，當它改變時後一個下拉列表的就更新為當前省的所有城市。
首先我們需要省市的資料:就是一個包含所有省的陣列，而且每個省中有一個城市陣列。這裡我是寫北京為例子。
var data = [
{
"province": "北京","city": [
{
"cname": "北京","code": "101010100"
},{
"cname": "朝陽","code": "101010300"
},{
"cname": "順義","code": "101010400"
},{
"cname": "懷柔","code": "101010500"
},{
"cname": "通州",www.cppcns.com
然後我們先在頁面上顯示兩個下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"&gFvKeojot;
www.cppcns.com <title>所在地區</title>
</head>
<body>
<select id="province"></select>省
<select id="city"></select>市
<script src="js/data.js"></script>
<script src="js/mycity.js"></script>
</body>
</html>對應的Script的程式碼：先對陣列進行遍歷得到的是所有的省，再對每個省遍歷就能改省的所有城市。通過建立和新增option節點在頁面上顯示。
// 對資料進行遍歷顯示所有省
data.forEach((p,i) => {
//建立一個option節點
let option = document.createElement('option');
//設定option節點文字值
option.textContent = p.province;
//設定option節點的value值
option.value = i;
//向id為province的元素中追加了一個子節點option
$('province').appendChild(option);
//預設在下拉列表載入城市
chooseCity(0);
})
//為向id為province的元素新增‘change'事件
$('province').addEventListener('change',function () {
/* 在下拉列表中載入城市*/
chooseCity(this.value);
})
//函式：獲取對應省的所有城市
function chooseCity(index) {
//通過索引獲取對應的省
let p = data[index];
//清除當前的城市資訊
$('city').length = 0;
//獲取對應省的所有城市
let cities = p.city;
//對所有城市進行遍歷顯示
cities.forEach(c => {
//建立一個option1節點
let option1 = document.createElement('option');
//設定option1節點文字值
option1.textContent = c.cname;
//向id為city的元素中追加了一個子節點option1
$('city').appendChild(option1);
})
}
//函式：通過id獲取元素
function $(id) {
return document.getElementById(id);
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。