js实现城市二级联动列表
这个是一个同事写的,我看着有用,就cv下来了.
程序功能主要逻辑是:
1.当一级标签市显示默认状态 '-请选择-'时,二级标签要隐藏
2.一级标签选中城市时,二级标签显示在页面,并列出响应市区
3.当一级标签选回默认状态时,二级标签隐藏
<!DOCTYPE HTML> <html> <head> <title>城市二级联动列表</title> <meta charset="utf-8" /> <style> .hide{ display: none; } </style> </head> <body> <select name="provs"> <option>—请选择—</option><!--0--> <option>北京市</option><!--1--> <option>天津市</option> <option>河北省</option> </select> <select name="cities" class="hide"> </select> <script> /*实现“省”和“市”的级联下拉列表*/ var cities=[ [{"name":'东城区',"value":101}, {"name":'西城区',"value":102}, {"name":'海淀区',"value":103}, {"name":'朝阳区',"value":104}],//0 [{"name":'河东区',"value":201}, {"name":'河西区',"value":202}, {"name":'南开区',"value":303}], [{"name":'石家庄市',"value":301}, {"name":'廊坊市',"value":302}, {"name":'保定市',"value":303}, {"name":'唐山市',"value":304}, {"name":'秦皇岛市',"value":304}] ]; //查找两个select var selProvs= document.getElementsByName( "provs" )[0]; var selCts= document.getElementsByName( "cities" )[0]; //为selProvs绑定选中项改变事件 selProvs.onchange=function(){ //获得当前select选中项的下标 var i=this.selectedIndex; if(i>0){ //获得cities数组中i-1位置的子数组 var cts=cities[i-1]; //清空selCts的内容: selCts.innerHTML=""; //创建文档片段 var frag= document.createDocumentFragment(); //创建一个option，内容为-请选择-,追加到selCts下 var opt= document.createElement("option"); opt.innerHTML="-请选择-"; frag.appendChild(opt); //遍历cts中每个城市 for(var i=0;i<cts.length;i++){ //创建一个option，设置其内容为当前城市的name属性，设置其value为当前城市的value属性,追加到selCts中 var opt= document.createElement("option"); //cts[i]: // {"name":'东城区',"value":101} opt.innerHTML=cts[i]["name"]; opt.value=cts[i]["value"]; frag.appendChild(opt); } //将frag整体追加到selCts中 selCts.appendChild(frag); //清除selCts的class selCts.className=""; }else selCts.className="hide"; } </script> </body> </html>
