html dom select 对象的各种属性
1) selectedIndex 可以设置或返回列表中被选选项的索引号;
2)如果可以多选(<select multiple="multiple">),返回被选第一项的索引;
3) options[] 并非一个简单的集合,它也可以
通过 select.options.length = 1; 来设置显示的选项
//实现逻辑: 省 /市 /县 的三级联动 <body> <p> 请选择地区： <select name="" id="proc"> <option value="">--请选择省--</option> </select> <select name="" id="city"> <option value="">--请选择市--</option> </select> <select name="" id="dist"> <option value="">--请选择区--</option> </select> </p> <body> <script> //声明省 var oProc = ["安徽", "上海", "山东"]; //直接声明array //声明市 var oCity = [ ["合肥", "淮南", "芜湖"], ["浦东", "闵行", "浦西"], ["济南", "青岛", "枣庄"] ]; //声明区 var oDist = [ [ ["政务区", "庐阳区", "蜀山区"], ["田家庵区", "大通区", "九龙岗区"], ["镜湖区", "鸠江区", "三山区"] ], [ ["浦东1", "浦东2", "浦东3"], ["闵行1", "闵行2", "闵行3"], ["浦西1", "浦西", "浦西3"] ], [ ["历下区", "天桥区", "长清区"], ["市南区", "市北区", "李沧区"], ["薛城区", "市中区", "峄城区"] ] ]; // 目标：实现三级联动 /// 分析 一下 // 1. 一进来应该加载所有的省的内容 // 2. 选择了省以后 ，动态加载当前省下面的所有的城市 // 3. 选择了城市以后，动态去加载当前城市下面所有的县 var proc = document.querySelector('#proc'); var city = document.querySelector('#city'); var dist = document.querySelector('#dist'); // 1. 一进来应该加载所有的省的内容 for (var i = 0; i < oProc.length; i++) { var po = document.createElement('option'); po.innerText = oProc[i]; proc.appendChild(po); } //2. 选择省之后, 动态加载当前省下面的所有市 proc.onchange = function () { //判断如果没有选中, 代码不执行 if(proc.options.selectedIndex == 0) { city.options.length = 1; dist.options.length = 1; return false; } city.options.length = 1; dist.options.length = 1; var select = proc.options.selectedIndex; //这个索引从1开始 console.log(select); var index = select - 1; //生成所有市 for (var j = 0; j < oCity[index].length; j++) { var co = document.createElement('option'); co.innerText = oCity[index][j]; city.appendChild(co); } } //3. 选择市之后, 动态生成所有区 city.onchange = function() { if(city.options.selectedIndex == 0) { dist.options.lenth =1; } dist.options.length = 1; var select = city.options.selectedIndex; //这个索引从1开始 var pSelect = proc.options.selectedIndex; //拿到省的选中索引 console.log(select); var index = select - 1; var pIndex = pSelect-1; //生成所有市 for (var j = 0; j < oDist[index].length; j++) { var dio = document.createElement('option'); dio.innerText = oDist[pIndex][index][j]; dist.appendChild(dio); } }