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

要想实现这个步骤，就要用到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. nodejs中的 Cannot read property'text' of undefined 问题

    接触nodejs时间不久,最近遇到了这个问题,经过查阅资料以及百度终于解决了.

  2. Javascript DOM编程艺术JS代码

    //com function addLoadEvent (func) { var oldonload = window.onload; if (typeof window.onload != 'fun ...

  3. 反片语（map）

    输入一些单词,找出所有满足如下条件的单词: 该单词不能通过字母重排,得到输入文本中的另外一个单词. 在判断是否满足条件时,不区分大小写,但输出保留输入中的大小写,按字典序进行排列(所有大写字母在小写字 ...

  4. Java 中级IO流基础及主要API编程

    1. IO流基础知识,流 是字节从源到目的地的运行的轨迹,次序是有意义的, 字节会按照次序进行传递, 比如Hello World 在下图中的传递的轨迹.该图形象的解释了IO中流的概念.流中全是字节.2 ...

  5. Windows下Redis的安装

    1.安装Redis 官方网站:http://redis.io/ 官方下载:http://redis.io/download 可以根据需要下载不同版本 windows版:https://github.c ...

  6. mysql的四种隔离级别

    一.READ UNCOMMITTED(未提交读) 在READ UNCOMMITTED级别,事务中的修改,即使未提交,对其他事务也都是可见的.事务可以读取未提交的数据,这也被称为脏读( Dirty RE ...

  7. PHP获取生成一个页面的数据库查询次数（转）

    很多博客软件都有这么一个功能,比如“生成本次页面一共花费了xx毫秒,进行了xx次数据库查询”等等.那么这个功能是如何实现的呢,下面我大概说下思路. 1. 在类的构造函数中声明全局变量 定义一个全局变量 ...

  8. Oracle 11gR2 RAC 安装配置

    1. 简介   Oracle RAC,全称real application clusters,译为"实时应用集群", 是Oracle新版数据库中采用的一项新技术,是高可用性的一种, ...

  9. 使用AES加密的帮助类

    在开发中经常使用加密/解密对一些内容进行处理,比如密码在存入数据库之前先经过加密处理等等,这里就把一个加密帮助类代码贴出来,供以后查找使用. 这个帮助类主要功能是对字符串和字节数组进行加密解密处理. ...

  10. chart

    var pieChart = { width: 600, height: 400, series: [], unit: "kg", chartCanvas: null, selec ...