<!DOCTYPE HTML> <html> <head> <title>二级联动列表</title> <meta charset="utf-8" /> <style> .hide{ display: none; } </style> <script> /*实现“省”和“市”的二级联下拉列表*/ var cities=[ [], /*0号下标没有元素*/ [{"name":'东城区',"value":101}, {"name":'西城区',"value":102}, {"name":'海淀区',"value":103}, {"name":'朝阳区',"value":104}], [{"name":'河东区',"value":201}, {"name":'河西区',"value":202}, {"name":'南开区',"value":303}], [{"name":'石家庄市',"value":301}, {"name":'廊坊市',"value":302}, {"name":'保定市',"value":303}, {"name":'唐山市',"value":304}, {"name":'秦皇岛市',"value":304}] ]; function selCities(i){console.log(i);//找到name属性为cities的select元素,保存在变量sel中 var sel=document.getElementsByName("cities")[0];//如果i等于0,就设置sel的class属性为hide if(i==0){ sel.className="hide"; }else{//否则 sel.innerHTML="";// 清除sel的内容 var arr=cities[i];// 获取cities数组中i位置的子数组,保存在变量arr中 var frag=document.createDocumentFragment();// 创建一个文档片段对象,保存在变量frag中 /* //创建一个空option元素,保存在opt中 var opt=document.createElement("option"); //设置opt的value属性为-1 opt.value=-1; //设置opt的内容为 opt.innerHTML="-请选择-"; */ var opt=new Option("-请选择-",0); frag.appendChild(opt);// 将opt(子节点)追加到frag(文档片段)下 for(var i=0;i<arr.length;i++){// 遍历arr中每个城市对象 // 每遍历一个城市就创建一个空option元素,保存在变量opt中 /* var opt=document.createElement("option"); //设置opt的value属性为当前城市的value属性值 opt.value=arr[i].value; //设置opt的内容为当前城市的name属性值 opt.innerHTML=arr[i].name; */ var opt=new Option(arr[i].name,arr[i].value); frag.appendChild(opt);//将opt追加到frag下 } sel.appendChild(frag);// 将frag追加到sel下 sel.className="";// 清除sel的class属性 } } </script> </head> <body> <select name="provs" onchange="selCities(this.selectedIndex)"> <option>—请选择—</option><!--0--> <option>北京市</option><!--1--> <option>天津市</option><!--2--> <option>河北省</option><!--3--> </select> <select name="cities" class="hide"> </select> </body> </html>
实现“省”和“市”的二级联下拉列表
猜你喜欢
转载自go2here.iteye.com/blog/2285959
今日推荐
周排行