1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>省市级联效果</title>
  6. <script type="text/javascript">
  7.     function selectCity(){
  8.         var objProvince=document.getElementById("province");
  9.         var objCity=document.getElementById("city");
  10.         //objCity.length=0; //清空下拉列表选项
  11.         objCity.options.length=0;
  12.         switch(objProvince.value){
  13.                 case "1":
  14.                     objCity.add(new Option("南京","1"),null);
  15.                     objCity.add(new Option("苏州","2"),null);
  16.                     objCity.add(new Option("无锡","3"),null);
  17.                     objCity.add(new Option("南通","4"),null);
  18.                     break;
  19.                 case "2":
  20.                     objCity.add(new Option("济南","1"),null);
  21.                     objCity.add(new Option("青岛","2"),null);
  22.                     objCity.add(new Option("日照","3"),null);
  23.                     objCity.add(new Option("烟台","4"),null);
  24.                     break;
  25.                 case "3":
  26.                     objCity.add(new Option("广州","1"),null);
  27.                     objCity.add(new Option("东莞","2"),null);
  28.                     objCity.add(new Option("深圳","3"),null);
  29.                     objCity.add(new Option("佛山","4"),null);
  30.                     break;
  31.         }
  32.     }
  33. </script>
  34. </head>
  35. <body>
  36.     <form action="" method="post">
  37.         <select id="province" onchange="selectCity();">
  38.             <option value="0">--省份--</option>
  39.             <option value="1">江苏省</option>
  40.             <option value="2">山东省</option>
  41.             <option value="3">广东省</option>
  42.             <option value="4">浙江省</option>
  43.             <option value="5">云南省</option>
  44.         </select>
  45.         <select id="city">
  46.             <option value="0">--城市--</option>
  47.         </select>
  48.     </form>
  49. </body>
  50. </html>

数组-省市级联

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>数组-省市级联</title>
  6. <script type="text/javascript">
  8.     //定义省份城市数组
  9.     var provinces=new Array();
  10.     provinces["江苏省"]=["南京市","苏州市","徐州市","宿迁市"];
  11.     provinces["山东省"]=["济南市","日照市","烟台市","青岛市"];
  12.     provinces["浙江省"]=["杭州市","宁波市","义务市","温州市"];
  13.     provinces["广东省"]=["广州市","佛山市","东莞市","珠海市"];
  14.     //初始化省份信息
  15.     function init(){
  16.     var objProvince=document.getElementById("province");
  17.     for(var p in provinces){
  18.         objProvince.add(new Option(p,p),null);
  19.         }
  20.     }
  21.     //切换城市
  22.     function changeCity(){
  23.         var objProvince=document.getElementById("province");
  24.         var objCity=document.getElementById("city");
  25.         objCity.length=0;
  26.         //方式一：
  27. /*          for(var p in provinces){
  28.                 if(p==objProvince.value){
  29.                     for(var c in provinces[p]){
  30.                         objCity.add(new Option(provinces[p][c],provinces[p][c]),null);
  31.                     }
  32.                 }
  33.             }   */
  34.         //方式二：
  35.             for(var p in provinces[objProvince.value]){
  36.                 objCity.add(new Option(provinces[objProvince.value][p],provinces[objCity.value]),null);
  37.             }
  38.     }
  39.             window.onload=init;
  40. </script>
  41. </head>
  42. <body>
  43.     <form action="" method="post">
  44.         <select id="province" onchange="changeCity();">
  45.             <option value="0">--省份--</option>
  46.         </select>
  47.         <select id="city">
  48.             <option value="0">--城市--</option>
  49.         </select>
  50.     </form>
  51. </body>
  52. </html>

JavaScript实现省市级联效果实例的更多相关文章

  1. JavaScript 省市级联效果

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

  2. javascript中的省市级联效果

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

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

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

  4. JavaScript学习笔记- 省市级联效果

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. javascript 图片淡入淡出效果 实例源代码

    代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...

  6. 省市级联.net

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

  7. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. JavaScript Table行定位效果

    作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...

  9. JavaScript实现的购物车效果-效果好友列表

    JavaScript实现的购物车效果.当然,可以在许多地方使用这种效果.朋友的.例如,在选择.人力资源模块,工资的计算,人才选拔等..下面来看一下班似有些车效果图: watermark/2/text/ ...

随机推荐

  1. LoadRunner 脚本学习 -- 读取文件内容

    随便创建个txt文档  输入点内容,例如 读取文件内前N个字符: Action() { long myfile; ; ]; char *filename = "E:\\kkk.txt&quo ...

  2. LoadRunner 12.02 安装以及汉化教程

    LoadRunner 12.02 安装 一.下载 首先下载Loadrunner12安装包. 下载后有四个安装包: HP_LoadRunner_12.02_Community_Edition_Addit ...

  3. JavaScript设计模式——方法的链式调用

    方法的链式调用: (function() { //私有类 function _$ (els) { this.elements = []; for(var i = 0, len = els.length ...

  4. uva624 01背包要求输出路径

    You have a long drive by car ahead. You have a tape recorder, but unfortunately your best music is o ...

  5. Angular JS 学习之 Scope作用域

    1.Scope作用域是应用在HTML(视图)和JavaScript(控制器)之间的纽带: Scope是一个对象,有可用的方法和属性: Scope可应用在视图和控制器上: 2.当你在AngularJS中 ...

  6. node.js整理 05进程管理

    简介 NodeJS可以感知和控制自身进程的运行环境和状态,也可以创建子进程并与其协同工作,这使得NodeJS可以把多个程序组合在一起共同完成某项工作,并在其中充当胶水和调度器的作用 常用API Pro ...

  7. 前端学PHP之文件操作(认真读读)

    前面的话 在程序运行时,程序本身和数据一般都存在内存中,当程序运行结束后,存放在内存中的数据被释放.如果需要长期保存程序运行所需的原始数据,或程序运行产生的结果,就需要把数据存储在文件或数据库.一般地 ...

  8. Spring Boot 集成MyBatis

    http://blog.csdn.net/isea533/article/details/50359390

  9. Redis 事务总结

        特点: 对单个客户端可以执行连续性事务(在一个线程内): 执行命令要排队: mutil类似begin trans; exec 类似 commit; discard 用于放弃事务: watch ...

  10. NODEJS-fs模块操作文件系统

    1. 使用 fs模块 对文件/目录进行操作 2. 使用 path模块 对路径进行操作 使用 fs模块 对文件/目录进行操作 读取文件内容 // fs.readFile(filename, [optio ...