地址聯動

select {

width: 100px;

padding: 5px;

font-size:16px;

}

選擇地址

---

//定義省市的信息

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();

總結

以上是生活随笔為你收集整理的html下拉框选中第二个,html通过点击第一个select改变第二关select的内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。