【响应式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>

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

【响应式Web前端设计】一文学会使用Bootstrap！
文章目录 1 概念 2 Bootstrap简介 3 布局容器 4 导航栏(navbar) 4.1 基本 4.2 响应式 5 垂直表单-基本表单 6 栅格系统 7 标签页 8 响应式工具请先学习该文 ...
【响应式Web前端设计】CSS3 :nth-of-type() 选择器
<!DOCTYPE html> <html> <head> <style> p:nth-of-type(2) {background:#ff0000; ...
【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图文）
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...
【响应式Web前端设计】css中：overflow：hidden解决塌陷
overflow:hidden是当元素内的内容溢出的时候使它隐藏溢出的部分,即超出部分隐藏. 1.我们给一个父元素,里面有两个子元素 2.样式如下:给父元素设置背景颜色,子元素设置边框,两个字元素向左 ...
【响应式Web前端设计】CSS浮动(float,clear)讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
【响应式Web前端设计】!important的用法及作用
div { color: #f00 !important; } div { color: #000; } //上述代码中,ie6及其以下浏览器div的文本颜色为#fff,后面的重写的div样式没有起作 ...
【响应式Web前端设计】设置图片间隙为0
解决方案一background 设置父容器的background,可以平铺一个合适的背景或图片.这样的话,两个图片之间的过渡,就会显得更加平滑.但是相关空隙依然存在,只不过因为父容器的背景色的缘故,使 ...
【响应式Web前端设计】在html页面实时显示系统时间
在html页面实时显示系统时间桌面新建记事本,将下列代码复制粘贴,重命名后缀为.html,保存,用浏览器打开即可 <html> <head><meta http-equ ...
【响应式Web前端设计】:link、:hover、:active和:visited的区别
:link.:hover.:active和:visited的区别? :link表示鼠标点击之前,也称为原始状态 :hover表示鼠标悬停状态 :active表示鼠标点击状态 :visited表示鼠标点 ...

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

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

最新文章

热门文章