实现“省”和“市”的二级联下拉列表

最新推荐文章于 2021-06-04 05:12:58 发布

iteye_468

最新推荐文章于 2021-06-04 05:12:58 发布

阅读量321

点赞数

分类专栏： js 文章标签： python c#

本文链接：https://blog.csdn.net/iteye_468/article/details/82649261

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!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" οnchange="selCities(this.selectedIndex)">
  <option>—请选择—</option><!--0-->
<option>北京市</option><!--1-->
<option>天津市</option><!--2-->
<option>河北省</option><!--3-->
</select>
 <select name="cities" class="hide">
 </select>
</body>
</html>

iteye_468

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现“省”和“市”的二级联下拉列表

&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;二级联动列表&lt;/title&gt;&lt;meta charset="utf-8" /&gt;&lt;style&gt; .hide{ display: none; }&lt;/style&gt;&lt
复制链接

扫一扫