900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html下拉框选中第二个 html通过点击第一个select改变第二关select的内容

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

时间:2023-11-04 08:42:03

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。