html+js写双向绑定

博客展示了双向绑定的效果图,即选中省份时显示对应市。还给出了实现该效果的简单HTML代码和主要的JS代码,作者欢迎读者对代码提出疑问或错误指正。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果图

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值