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

布满荆棘的人生 2022-11-15 14:12 85阅读 0赞

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

作用：用于创建一个新的选项  
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>

发表评论取消回复

表情：

评论列表（有 0 条评论，85人围观）

还没有评论，来说两句吧...

相关阅读

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

在做三级联动的时候遇见了这个函数，对函数的用法进行一下小总结，不太详细，敬请谅解。作用：用于创建一个新的选项 Option()构造函数接受两个参数：文本(text)和值

布满荆棘的人生/ 2022年11月15日 14:12/ 0 赞/ 86 阅读

相关【响应式Web前端设计】HTML DOM padding 属性

定义和用法 padding 属性设置元素的内边距。 padding 属性定义元素边框与元素内容之间的空间。该属性可采取 4 个值：如果规定一个值，比如 div \

刺骨的言语ヽ痛彻心扉/ 2022年11月14日 00:59/ 0 赞/ 229 阅读

相关【响应式Web前端设计】Register Demo

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

妖狐艹你老母/ 2022年11月14日 00:59/ 0 赞/ 183 阅读

相关【响应式Web前端设计】Login Demo

body{ background: url('../img/1.png')no-repeat center center fixed; backg

曾经终败给现在/ 2022年11月14日 00:52/ 0 赞/ 196 阅读

相关【响应式Web前端设计】CSS 定位详解

文章目录 1 position 属性的作用 2 static 属性值 3 relative，absolute，fixed 3.1 relat

骑猪看日落/ 2022年11月14日 00:50/ 0 赞/ 224 阅读

相关【响应式Web前端设计】H5新特性

![在这里插入图片描述][20210610190438430.png] 当属性值不包括空字符串、“<”、“>”、"="、单引号、双引号等字符时，属性两边的引号可以省略。属

谁践踏了优雅/ 2022年10月06日 01:57/ 0 赞/ 173 阅读

相关【响应式Web前端设计】!important的用法及作用

div \{ color: \f00 !important; \} div \{ color: \000; \} //上述代码中，ie6及其以下浏览器div的文本颜色为

谁借莪１个温暖的怀抱￠/ 2022年10月05日 12:53/ 0 赞/ 186 阅读

相关响应式Web设计

1、什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的"窗口"（vie

Bertha 。/ 2022年09月30日 09:57/ 0 赞/ 269 阅读

相关前端之响应式设计

一天到晚的听人吹什么响应式设计，具体问又支支吾吾，打不出个具体所以然来，今天我就大概讲一下响应式设计，顺便讲一下其它的几种设计的区别。现在前端存在着这么几个布局： 1

╰+哭是因爲堅強的太久メ/ 2022年07月12日 03:26/ 0 赞/ 217 阅读

相关关于响应式web设计

手机网站+电脑网站+平版网站 = 响应式网站在没有足够经费跟精力的做一个手机网站的情况下，响应式网站是个不错的选择。它有以下的优点：减少工作量（网站

r囧r小猫/ 2022年02月25日 00:12/ 0 赞/ 300 阅读