html下拉框选中第二个,html通过点击第一个select改变第二关select的内容

地址联动

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