前言:
要想实现列表级联,需要动态的添加选项。选择标签 <select> 选项<option> ,要想实现列表级联。建议先看w3c中,dom对象中的select。
第一步:先来分析select对象的属性和方法,通过w3cschool可以发现,select有options[]集合属性,和add()方法,于是乎,好像问题就变得简单了,直接往里面加就行了。
先看一下实例代码
<html> <head> <script type="text/javascript"> function insertOption() { var y=document.createElement('option'); y.text='Kiwi' var x=document.getElementById("mySelect"); try { x.add(y,null); // standards compliant } catch(ex) { x.add(y); // IE only } } </script> </head> <body> <form> <select id="mySelect"> <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> </select> <input type="button" onclick="insertOption()" value="Insert option" /> </form> </body> </html>
代码分析:通过上面的代码可以发现,我们往选项集合中添加的是option对象,var y=document.createElement('option');
于是乎,现在问题好像变得不是问题了,现在来看一下我写的代码:
<html> <head> <title>列表级联</title> <script type="text/javascript"> function checkCity(){ } function addCity(){ var array= new Array(["成都","新津县","金牛区"],["眉山","东坡区","丹棱县"]); var sel_city=document.getElementById("city"); var sel_xian=document.getElementById("xian"); var y=document.createElement('option'); //这里表示选中的是第几个选项,这里第几个我们就添加第几个的县城 var cityID=sel_city.selectedIndex; //先遍历二维数组的每一排,的第一个元素,找到匹配的城市,再添加县城 //二维数组的变量,数组名字.length是代表有多少行,数组名字[i],表示这个有多少列,数组名字[i][j],表示特定的一个元素 for(var i=0;i<array.length;i++){ var b=i+1; if(cityID==b){ //先将原来的清空,只保留最上面的那个选中提示项 //直接设置数组的长度,将是截断和增长的效果 sel_xian.options.length=1; for(var j=1;j<array[i].length;j++){ try{ y.text=array[i][j]; sel_xian.options.add(y);// standards compliant } catch(ex){ y.text=array[i][j];; sel_xian.add(y,null);// IE only } } break; } } } </script> </head> <body> <select id="city" name="city" onChange="addCity()"> <option>--选择城市--</option> <option>--成都--</option> <option>--眉山--</option> </select> <select id="xian" name="xian"> <option>--县城--</option> </select> </body> </html>
您发现了坑在哪里吗?
代码分析:
我上面的代码号称也是模仿实例代码的高仿真代码,那么现在问题来了?运行上面的代码会发现,不管网options集合中添加了几次,最后只添加了最后一次的结果。于是看似简单问题,程序猿又要抓耳捞腮了。
原因分析:
options集合理解存放的是option对象,上面的代码只是再不断的改变对象的属性。如果我们在list列表中不断加入同一个对象是可以的,但是这里options集合机制明显就是set集合机制,不能存放重复的对象,这也是醉了,又不能像java一样重写他的比较方法。
所以坑就在这里,options集合是不能放入重复的对象的,下面的代码才是正确的。。。。。
<html> <head> <title>列表级联</title> <script type="text/javascript"> function checkCity(){ } function addCity(){ var array= new Array(["成都","新津县","金牛区"],["眉山","东坡区","丹棱县"]); var sel_city=document.getElementById("city"); var sel_xian=document.getElementById("xian"); //这里表示选中的是第几个选项,这里第几个我们就添加第几个的县城 var cityID=sel_city.selectedIndex; //先遍历二维数组的每一排,的第一个元素,找到匹配的城市,再添加县城 //二维数组的变量,数组名字.length是代表有多少行,数组名字[i],表示这个有多少列,数组名字[i][j],表示特定的一个元素 for(var i=0;i<array.length;i++){ var b=i+1; if(cityID==b){ //先将原来的清空,只保留最上面的那个选中提示项 //直接设置数组的长度,将是截断和增长的效果 sel_xian.options.length=1; for(var j=1;j<array[i].length;j++){ try{ var y=document.createElement('option'); y.text=array[i][j]; sel_xian.options.add(y);// standards compliant } catch(ex){ y.text=array[i][j];; sel_xian.add(y,null);// IE only } } break; } } } </script> </head> <body> <select id="city" name="city" onChange="addCity()"> <option>--选择城市--</option> <option>--成都--</option> <option>--眉山--</option> </select> <select id="xian" name="xian"> <option>--县城--</option> </select> </body> </html>
相关推荐
hibernate many-to-many级联保存,级联更新,级联删除
安卓--级联下拉列表实现DEMO
Spectrum Microwave Cascade7.0-RF级联频谱分析,适用于级联系统指标计算,包括但不限于NF、OIP3、输出频谱以及杂散分析
音频硬件,TDM级联,NxFs,多麦克风链路设计
全国省-市-区县-街道-居委会级联关系,不保证完整,注意上传时间,使用sqlite保存,请自己手动json导出
第七章_Hibernate_-_级联策略 第七章
DirectX11 With Windows SDK--38 级联阴影贴图(CSM).doc
uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip
用二维Henon混沌映射生成的两个混沌相位掩模替代双随机相位掩模,将混沌系统的初始值和控制参数作为密钥,增加密钥空间,为加密系统提供更多的安全性。 对加密系统的密钥敏感性、图像相邻像素间的相关性、抗剪切攻击性...
在javaScript中使下拉列表实现级联更新
基于haar-like级联特征的人脸检测算法,可以直接使用,有一定的抗旋转干扰能力。
行业分类-设备装置-基于级联方程的椭圆轨道航天器相对位置退步控制方法.zip
Face-Detection-with-Adaboost-master_haar-like级联人脸检测代码_haar人脸检测.z
电子政务-可级联式直线电机.zip
行业资料-电子功用-多重级联斩波降压等离子切割电源
行业资料-电子功用-混合级联多电平静止同步补偿装置和风电机组供电系统
matlab开发-使用级联HBridgeconverterbasedStatcom增强电源质量。因德拉尼尔·萨基
行业-电子政务-具有级联二极管电路的升压电路和逆变器拓扑.zip