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省市级联实现的更多相关文章

  1. 纯js实现省市级联效果

    我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...

  2. Ajax异步刷新省市级联

    省市级联在web前端用户注册使用非常广泛.Ajax异步刷新省市级联.如图:选择不同的区,自动加载相应的街. <TD class=field>位 置:</TD> <TD&g ...

  3. JavaScript 省市级联效果

    JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  4. 省市级联.net

    初学javascript,编译省市级联,使用json在一般处理程序中编译,利用ajax传递数据到web前台 <html xmlns="http://www.w3.org/1999/xh ...

  5. JS动态级联菜单

    JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...

  6. JavaScript实现省市级联效果实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

  8. javascript中的省市级联效果

    学习javascript的时候都遇到过这样的需求,不仅是省市,还有其他的一些场景,看看关键的代码有哪些吧. <head runat="server"> <titl ...

  9. 全国省市级联数据sql语句 mysql版

    全国省市级联数据sql语句 mysql版 --省级 provincial create table provincial ( provincialID int, provincialName ), p ...

随机推荐

  1. oracle的参数文件：pfile和spfile

    1.pfile和spfile Oracle中的参数文件是一个包含一系列参数以及参数对应值的操作系统文件.它们是在数据库实例启动时候加载的,决定了数据库的物理 结构.内存.数据库的限制及系统大量的默认值 ...

  2. Linux下设置oracle环境变量

    Linux设置Oracle环境变量 方法一:直接运行export命令定义变量,该变量只在当前的shell(BASH)或其子shell(BASH)下是有效的,shell关闭了,变量也就失效了,再打开新s ...

  3. GoldenGate 12c + Oracle 12c Multitenant Container databases

    下面为GoldenGate 12c + Oracle 12c Multitenant Container databases例子 1.安装OGG 源 端OGG: C:\Oracle\product\1 ...

  4. 转 PHP5+APACHE2.2配置

    初学php,配置起来老出问题,找了篇不错的帖子,一试就通过了,所以就顺带着转了过来. 不过在我安装phpMyAdmin的时候还是发现这篇文章的一个问题,就是php.ini如果放在system32下,启 ...

  5. Hibernate第一次学习总结

    Hibernate概述 是一款方便应用操作数据库的中间件,使应用直接通过操作Java对象来操作数据库. 实现了ORM模型,包括:数据库表与JAVA对象的映射,表关联与Java对象关系的映射. 实现了O ...

  6. C# 向指定的进程发送消息

    public static class ProcessExtensions { // Messages const int WM_KEYDOWN = 0x100; const int WM_KEYUP ...

  7. 使用Docker运行Java Web应用

    前言 Tomcat是目前比较流行的Web应用服务器,深受Java爱好者的喜爱.通常J2EE应用的产出物是一个war包,这篇文章将为你介绍如何使用Docker运行Tomcat+war包的Java Web ...

  8. c++ remove_if

    #include <algorithm> 函数remove_if()移除序列[start, end)中所有应用于谓词p返回true的元素. 此函数返回一个指向被修剪的序列的最后一个元素迭代 ...

  9. 树莓派进阶之路 (030) -Picustom.h(原创)

    写代码的时候敢接每次查wiringPi库函数挺麻烦的,自己wiringPi库封装了一下: #ifndef __PICUSTOM_H__ #define __PICUSTOM_H__ /******** ...

  10. PowerDesigner之PDM(物理概念模型)各种属性建立如PK,AK等

    一.PDM概述 PDM(物理数据模型),通俗地理解,就是在PowerDesigner中以图形化的方式展示和设计数据库. PDM中涉及到的基本概念包括: 表: 列: 视图: 主键: 候选键: 外键: 存 ...