<!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删除。