二级联动在一般的网页中随处可见，一般是地址，比如点击浙江省，随后出现的是杭州市，嘉兴市；点击北京省出现的是朝阳，海淀，而不是出现杭州，嘉兴。

要想实现这个步骤，就要用到javascript来实现。其中原理用到onchange时间。

首先，onchange 事件会在域的内容改变时发生。支持该事件的 JavaScript 对象：fileUpload, select, text, textarea，我们在实现二级联动中正是用到select来完成。

以下是HTML代码，先设置一个select为省，第二个select为市，但是市我们在js中用数组将其与省份连接。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>javascript二级联动</title>

</head>

<body>

<select id="province">

    <option value="-1">省</option>

    <option value="0">北京</option>

    <option value="1">浙江</option>

</select>

<select id="city">

</select>

<script src="../js/province.js"></script>

</body>

</html>

以下是js代码

var province = document.getElementById("province");

var city = document.getElementById("city");

var area = [

['朝阳','海淀','北京'], //第0个area的数组。0{0,1,2}

['杭州','海宁']         //第1个area的数组, 1{0.1}

];

 function choose(){

     var opt = "";

     var len = area[province.value];  //如果选择北京0，那么，len=[’朝阳‘，’海淀‘]    这个是连接哪个省份对应着哪个市的市的数组

     if(province.value == '-1'){     //因为select的value为-1的时候是‘省’这个字，而不是北京，所以，我们选择这个省的时候对应着让他的市为空

         city.innerHTML = opt;

     }

     for(var i = 0;i < len.length; i++){  //area的数组个数for(i = 0;i < 3; i++)

        opt = opt + '<option value ="'+ i +'">  '+ len[i]+ '</option>'  //opt = "" + <option value = "0">朝阳(lin[0])</option>,

                                                                        //opt = <option value = "0">朝阳(lin[0])</option>, +<option value = "1">海淀(lin[1])</option>

                                                                        //opt = <option value = "0">朝阳(lin[0])</option>, +<option value = "1">海淀(lin[1])</option> +<option value = "2">北京(lin[2])</option>

     }

     city.innerHTML = opt;

}

province.onchange = function(){

    choose();

}

二级联动在一般的网页中随处可见，一般是地址，比如点击浙江省，随后出现的是杭州市，嘉兴市；点击北京省出现的是朝阳，海淀，而不是出现杭州，嘉兴。

要想实现这个步骤，就要用到javascript来实现。其中原理用到onchange时间。

javascript二级联动的更多相关文章

  1. javascript 二级联动

    <html> <head> <title></title> <meta http-equiv="Content-Type" c ...

  2. Ajxa验证用户和二级联动的实例(五)

    验证用户: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  3. 利用JavaScript来实现省份—市县的二级联动

    所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...

  4. JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串，和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动

    JavaScript日历控件开发   概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...

  5. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  6. Javascript中二级联动

    主要使用到到了地址JSON格式,来做,没有涉及数据库的读取. <!DOCTYPE html><html><head> <meta charset=" ...

  7. 二级联动，三级联动，初学者，纯javascript，不含jQuery

    二级联动: html代码: <body> <select id="province" onchange="getCity(this.options.se ...

  8. JavaScript+Json写的二级联动

    省市区的联动,相当常见 我就不写这么大数据的了,先写个简单的试一试 <!DOCTYPE html> <html> <head> <title></ ...

  9. asp.net 使用DroDownList来实现二级联动

    今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...

随机推荐

  1. 我们为什么要遵循W3C标准规范

    大部分的站长和拥有网站的企业负责人都会知道,每当有浏览器发布大更新的时候,我们刚建立不久的网站就会发生无法预知的严重错误,我们只能重新建立或改版网站,使其可以应归新发布的浏览器.好比1996-1999 ...

  2. Java枚举类enum

    枚举类enum是JDK1.5引入的,之前都是用public static final int enum_value来代替枚举类的.枚举类enum是一种特殊的类,它默认继承了类java.lang.Enu ...

  3. javascript中base64和Gzip的使用

    一般的使用流程(4步): 服务器端将字符串Gzip压缩为 字节数组——>通过base64转为字符串(后传递到客户端)——>解码base64字符串为字节数组——>Gzip解码字节数组为 ...

  4. windows系统部署discuz并和javaweb账号连通同步

    一.Discuz安装说明 1．安装wamp集成环境 (1)下载wampserver集成环境 网址:(http://wampserver-64bit.en.softonic.com)或百度搜索下载 (2 ...

  5. Android 上传库到Binary的操作

    第一次,按照网上教程配置需要的配置文件,上传成功 1.0版本. 以后更新的时候 输入 : install ,执行task 然后再输入:bintrayUpload ,执行task,看下面控制台输出信息, ...

  6. Nginx 配置指令的执行顺序（九）

    紧接在 server-rewrite 阶段后边的是 find-config 阶段.这个阶段并不支持 Nginx 模块注册处理程序,而是由 Nginx 核心来完成当前请求与 location 配置块之间 ...

  7. Sql Server专题二：数据库主要对象

    存储过程 (1)减少网络通信量.调用一个行数不多的存储过程与直接调用sql语句的网络通信量可能不会有很大的差别,可是如果存储过程包含上百行sql语句,那么其性能绝对比一条一条的调用sql语句要高得多. ...

  8. DIV周边添加投影及背景固定

    DIV周边添加投影.tou{ width:1000px; height:300px; border:0px solid #999; background:#FFF; margin:0 auto; ma ...

  9. USB HID复合设备实例—键盘+鼠标

    实现这种USB HID复合设备有两种方法,在<USB HID协议入门>一节已经讲到其中一种方法,说一个USB HID设备可以包含多种功能的报告描述符合集,这样可以实现复合设备,如带鼠标功能 ...

  10. Memory Leak（内存泄漏）问题总结(转)

    最近听了一些关于Memory Leak(内存泄漏)的seminar,感觉有些收获,所以留个记录,并share给朋友. 1 什么是Memory Leak. Memory Leak是指由于错误或不完备的代 ...