js省市级联实现

时间：2023-05-26 17:44:44

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>

相关文章