html+js写双向绑定

效果图

**双向绑定：**当选中省份时会把与省份对应的市显示出来

简单的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>

以上是双向绑定的代码，如果有什么不懂的可以评论或者私聊我，我为你解答，若是发现有错误，请指出谢谢，希望你们年薪过百万。