码迷,mamicode.com
首页 > Web开发 > 详细

js省市级联实现

时间:2017-10-15 11:17:38      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:获取   return   html   text   json格式   ring   提示信息   temp   方式   

js省市级联实现。

for [element] in [collection] 用于循环下标,常用于json

for(index in arr){
   console.info("下标:"+index+"值:"+arr[index]);
}

=====================分割线========================
<html>
<head>
<meta charset="UTF-8">
<title>基于JSON级联列表</title>
<script type="text/javascript">
//JSON:主要用于数据交换,其次json就是有格式的字符串
//var str = "{‘name‘:‘demo‘,‘age‘:‘18‘}";
//这样写符合JSON语法(字符串用双引号)
var str = {"name":"demo","age":"18"}; 
console.info("当前类型为:"+typeof(str));
var obj = JSON.parse(str);
console.info("当前类型为:"+typeof(obj));
//JSON输出访问的两种方式
console.info(obj.name+","+obj.age+"||"+obj[name]+","+obj[age]);
str=JSON.stringify(obj);
console.info("当前类型为:"+typeof(str));

//采用JSON格式来存储相应的数据和编码
var proJSON = {"1":"广东省""2":"湖北省"};
var cityJSON = {"1":{"020":"广州","0755":"深圳","0756","珠海"},"2":{"027":"武汉","0710":"襄樊","0715":"赤壁"}}

window.onload=function(){
       var province = document.getElementById("province");
       for(var temp in proJSOM){
          province.add(new Option(proJSON[temp],temp));
       }
}

function setCity(){
   //只要触发了此事件,则二级菜单必须还原
   var city=document.getElementById(city);
   city.Option.length=1;
   //获取被选中省会的值
   var val = document.getElementById(province).value;
   console.info("cityJSON:"+cityJSON[val]);
   if(!cityJSON[val]){
       return;
   }
  //通过选中的值获取二级菜单的json数据
  var sonJSON=cityJSON[val];
  for(temp in sonJSON){
    city.add(new Option(sonJSON[temp],temp))
  }

 }

</script>
</head>


<body>
 <!--数据的三种存储方式:
    1:数据库
    2:properties:存储非敏感数据,且key value 格式,省资源
    3:XML:存储非敏感数据,且支持有结构 目前一般用于配置文件
    4:硬编码:主要存储非敏感数据,且不改变的数据
 -->
   <select id="province" onChange="setCity()">
      <option>--选择省会--</option>
   </select>
   <select id="city" >
      <option>--选择城市--</option>
   </select>
</body>
</html>




=====================分割线========================

<html>
<head>
<meta charset="UTF-8">
<title>基于数组级联列表</title>
<script type="text/javascript">
//js中数组的下标支持中文
var arr = new Array();
arr[广东省] = [广州,深圳,珠海];
arr[湖北省] = [武汉,襄樊,赤壁];
window.onload=function(){
     //向省会赋值下拉列表框
     var proSel = document.getElementById("province");
     for(var temp in arr){
        proSel.add(new Option(temp,temp))
     }
}

function setCity(){
   //清空当前下拉列表框的信息
   var citySel = document.getElementById("city");
   citySel.options.length=1;
   //获取选中的省会信息
   var pro = document.getElementById(province).value;
   //如果选择获取提示信息则不执行
   if(pro == ""){
     return;
   }
   var citySel = document.getElementById(city);
   for(var i=0;i<arr[pro].length;i++){
       citySel.add(new Option(arr[pro][i],arr[pro][i]))
   }
}
</script>
</head>


<body>
   <select id="province" onChange="setCity()">
      <option>--选择省会--</option>
   </select>
   <select id="city" >
      <option>--选择城市--</option>
   </select>
</body>
</html>

 

js省市级联实现

标签:获取   return   html   text   json格式   ring   提示信息   temp   方式   

原文地址:http://www.cnblogs.com/chenweichu/p/7669162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!