插入省市

最新推荐文章于 2022-08-11 09:56:44 发布

陈小煋

最新推荐文章于 2022-08-11 09:56:44 发布

阅读量391

点赞数

分类专栏： javascript 文章标签： javascript js 脚本

本文链接：https://blog.csdn.net/Star_Chan/article/details/51441380

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
   var arr=new Array();
   arr["广东"]=["东莞市","广州市","中山市","深圳市","惠州市","江门市","珠海市","汕头市","佛山市","湛江市","河源市","肇庆市","清远市","潮州市","韶关市","揭阳市","阳江市","梅州市","云浮市","茂名市","汕尾市"];
   arr["广西"]=["贵港市","玉林市","北海市","南宁市","柳州市","桂林市","梧州市","钦州市","来宾市","河池市","百色市","贺州市","崇左市","防城港市"];
   arr["安徽"]=["芜湖市","合肥市","六安市","宿州市","阜阳市","安庆市","马鞍山市","蚌埠市","淮北市","淮南市","宣城市","黄山市","铜陵市","亳州市","池州市","巢湖市"," 滁州市"];
   arr["北京"]=["朝阳区","海淀区","通州区","房山区","丰台区","昌平区","大兴区","顺义区","西城区","延庆县","石景山区","宣武区","怀柔区","崇文区","密云县","东城区","平谷区","门头沟区"];
   
   
   
   //插入省
   function addProvince(){
      var p=document.getElementById("province");
      for(var i in arr){ //循环出索引下标
         //第一个参数V表示文本，第二个参数V表示value
         p.add(new Option(i,i),null);//省份添加进去
         }
      }
   //插入市
   function addCity(){
      var c=document.getElementById("city");
      var p=document.getElementById("province");
      var v=p.value;//取选中的省份
      c.options.length=0;//清空下拉框中原有的文本
      for(var i=0;i<arr[v].length;i++){
         c.add(new Option(arr[v][i]),null);//添加市
         } 
      }  
   //点中会删除请选择的文本
   function del(){
      var p=document.getElementById("province");
      if(p.options[0].value=="请选择"){
      p.options.remove(0);
      }
   }
   
   

</script>


</head>

<body>

<select id="province"  οnfοcus="del()" οnchange="addCity()"><option>请选择</option></select>省
<select id="city" ><option>请选择</option></select>市


<script>

   addProvince();

</script>
</body>
</html>

陈小煋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
插入省市

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" content=
复制链接

扫一扫