需求：實現地址選擇聯動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地址聯動</title>
<style>
select {
width: 100px;
padding: 5px;
font-size:16px;
}
</style>
</head>
<body>
<h1>選擇地址</h1>
<hr>
<select id="prov"></select>
<select id="city"></select>
<script>
//定義省市的信息
var provList = ['江蘇','浙江','福建','湖南'];
var cityList = [];
cityList[0] = ['南京', '蘇州', '宿遷', '揚州'];
cityList[1] = ['杭州', '溫州', '寧波', '台州'];
cityList[2] = ['福州', '廈門', '泉州', '漳州'];
cityList[3] = ['長沙', '湘潭', '株洲', '湘西'];
//獲取select元素
var provSelect = document.querySelector('#prov');
var citySelect = document.querySelector('#city');
//把省的信息 添加到第一個select元素中
provList.forEach(function(val, index){
//DOM操作 了解
provSelect.add(new Option(val, index))
});
//給第一個select綁定change事件
provSelect.onchange = function(){
//獲取 當前的選項
var index = this.value;
//清空第二個select原先內容
citySelect.length = 0;
//選擇對應的城市列表，添加到第二個select
cityList[index].forEach(function(val, index){
citySelect.add(new Option(val, index));
})
}
//手工觸發一次 change事件
provSelect.onchange();
</script>
</body>
</html>