【响应式Web前端设计】new Option()函数的作用(三区联动)

在做三级联动的时候遇见了这个函数,对函数的用法进行一下小总结,不太详细,敬请谅解。

作用:用于创建一个新的选项
Option()构造函数接受两个参数:文本(text)和值(value);第二个参数可选.虽然这个构造函数会创建一个Object的实例,但是兼容DOM的浏览器会返回一个元素。我们依然可以使用appendChild()将新的选项加到选择框中。例如:

var newOption = new Option("Option text","Option value");
selectbox.appendChild(newOption);
<script>
    var city = [
        {
            "id": 10001,
            "name": "陕西省",
            "child": [
                {
                    "id": 100011,
                    "name": "西安市",
                    "child": [
                        {
                            "id": 100011,
                            "name": "高新区"
                        },
                        {
                            "id": 100011,
                            "name": "未央区"
                        }
                    ]
                },
                {
                    "id": 100012,
                    "name": "宝鸡市",
                    "child": [
                        {
                            "id": 100011,
                            "name": "高新区"
                        },
                        {
                            "id": 100011,
                            "name": "成仓区"
                        }
                    ]
                }
            ]
        },
        {
            "id": 10002,
            "name": "甘肃省",
            "child": [
                {
                    "id": 100021,
                    "name": "兰州市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "兰州区1"
                        },
                        {
                            "id": 100021,
                            "name": "兰州区2"
                        }
                    ]
                },
                {
                    "id": 100022,
                    "name": "酒泉市",
                    "child": [
                        {
                            "id": 100021,
                            "name": "酒泉区1"
                        },
                        {
                            "id": 100021,
                            "name": "酒泉区2"
                        }
                    ]
                }
            ]
        }
    ]
    /*当选择省时,创建对应的市子对象,并将其加入父元素中。
     * 当选择某一个市时,创建对应的区子对象,并将其加入父元素中。
     * 当选择其他省/市时,对应的市、区/区的选项都变为请选择。
     * 要注意:在每次重新选择时,需要将其余select标签的options元素的长度为1,即做一次清空。*/
    var sheng = document.getElementsByClassName("sheng")[0];
    var shi = document.getElementsByClassName("shi")[0];
    var qu = document.getElementsByClassName("qu")[0];
    var nowShengIndex = 0;
    for(var i=0;i<city.length;i++){
        var optEle = new Option(city[i].name,i);
        console.log(optEle.innerHTML);
        sheng.appendChild(optEle)
    }
    sheng.οnchange=function(){
        shi.options.length = 1;
        qu.options.length = 1;
        //this.value可取到当前所选值对应的索引
      for(var i=0;i<city[this.value].child.length;i++){
          var optEle = new Option(city[this.value].child[i].name,i);
          shi.appendChild(optEle)
      }
        nowShengIndex = this.value;

    };
    shi.οnchange=function () {
        qu.options.length = 1;
        console.log(qu);
        for(var i=0;i<city[nowShengIndex].child[this.value].child.length;i++){
            var optEle = new Option(city[nowShengIndex].child[this.value].child[i].name,i);
            qu.appendChild(optEle)
        }
    }
</script>
	  <select class="sheng">
    <option>
        -请选择省份-
    </option>
</select>
   <select class="shi">
    <option>
        -请选择城市-
    </option>
</select>
    <select class="qu">
    <option>
        -请选择区-
    </option>

李响Superb CSDN认证博客专家 机器学习 TensorFlow 图像处理
成为一名优秀的算法工程师⬆️ ,
目前还在读软件工程,
AI攻防、算法和深度学习方向,
微博同名❤️ :李响Superb,
(记得关注,有问题微博私信!)
我们一起努力呀!
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值