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

要想实现这个步骤，就要用到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. 【转载】Xcode6中添加pch文件

    //原文地址:http://www.cnblogs.com/YouXianMing/p/3989155.html 1. 新建工程: 2. 创建pch文件:cmd+n->other->PCH ...

  2. ORACLE触发器和new、old特殊变量

    :new --为一个引用最新的列值;:old --为一个引用以前的列值; 这两个变量只有在使用了关键字 "FOR EACH ROW"时才存在.且update语句两个都有,而inse ...

  3. hdu 2966 In case of failure k-d树

    题目链接 给n个点, 求出每个点到离它最近的点的距离. 直接建k-d树然后查询就可以  感觉十分神奇... 明白了算法原理但是感觉代码还不是很懂... #include <bits/stdc++ ...

  4. Python: xml转json

    1,引言 GooSeeker早在9年前就开始了Semantic Web领域的产品化,MS谋数台和DS打数机是其中两个产品.对web内容做结构化转换和语义处理的主要路线是 XML -> RDF - ...

  5. 判断括号匹配（nyoj2水）

    括号配对问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 现在,有一行括号序列,请你检查这行括号是否配对.   输入 第一行输入一个数N(0<N<=1 ...

  6. 九章算法系列（#2 Binary Search）-课堂笔记

    前言 先说一些题外的东西吧.受到春跃大神的影响和启发,推荐了这个算法公开课给我,晚上睡觉前点开一看发现课还有两天要开始,本着要好好系统地学习一下算法,于是就爬起来拉上两个小伙伴组团报名了.今天听了第一 ...

  7. 浅析 JavaScript 的函数节流和去抖

    现代网页的实现上,会有很多交互上的优化,比如常见的 滚动加载 ,输入联想 等等.他们的实现思路很简单,以滚动加载而言,无非就是去是增加一个滚动的事件监听,每次滚动判断当前的元素是否已经滚动到了用户的可 ...

  8. Eclipse setting Java code style and codetemplate

    1.open the eclipse tool window First click the Window menu,then check the children's menu which name ...

  9. Linux常用C函数---内存控制篇

    函数讲解部分参考http://net.pku.edu.cn/~yhf/linux_c/ calloc(配置内存空间) 相关函数 malloc,free,realloc,brk 表头文件 #includ ...

  10. [Leetcode][Python]41: First Missing Positive

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 41: First Missing Positivehttps://oj.le ...