效果图
**双向绑定:**当选中省份时会把与省份对应的市显示出来
简单的html代码
<form action="">
省份<select name="" id="s"></select>
城市<select name="" id="c"></select>
</form>
主要的js代码
<script>
var provinces = ["请选择省份", "北京市", "天津市", "上海市", "重庆市", "江苏省", "浙江省", "江西省", "海南省"];
var citys = [
["请选择城市"],
["北京市"],
["天津市"],
["上海市"],
["重庆市"],
["南京市", "无锡市", "徐州市", "常州市", "苏州市", "南通市", "连云港市", "淮安市", "盐城市", "扬州市", "镇江市", "泰州市", "宿迁市"],
["杭州市", "宁波市", "温州市", "绍兴市", "湖州市", "嘉兴市", "金华市", "衢州市", "台州市", "丽水市", "舟山"],
["南昌市", "九江市", "上饶市", "抚州市", "宜春市", "吉安市", "赣州市", "景德镇", "萍乡市", "新余市", "鹰潭市"],
["海口市", "三亚市", "三沙市", "儋州市"]
];
var s = document.getElementById('s')
var c = document.getElementById('c')
//往第一个select中添加省份
//index获取数组pravinces的下标
for (var index in provinces) {
var options = document.createElement('option')
s.appendChild(options)
options.innerHTML = `${provinces[index]}`
}
//往第二个select中添加"请选择城市"
var indexs = 0
var optios = document.createElement('option')
c.appendChild(options)
options.innerHTML = `${citys[indexs]}`
s.onchange = function () {
c.innerHTML = '';
//aa获取选中的省份的数组下标
aa = this.selectedIndex
for (var i = 0; i < citys[aa].length; i++) {
console.log(aa);
var options = document.createElement('option')
c.appendChild(options)
//把与省份对应的市显示出来
options.innerHTML = `${citys[aa][i]}`
}
}
</script>
以上是双向绑定的代码,如果有什么不懂的可以评论或者私聊我,我为你解答,若是发现有错误,请指出谢谢,希望你们年薪过百万。