<!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>
html通過點擊第一個select改變第二關select的內容
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。