<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Insert title here</title>

    <script type="text/javascript">

        function fn() {

            var select = document.getElementById("city"); //获得城市 元素对象

            var c = select.value; //获得选择的值value=""

            var area = document.getElementById("area"); //获得区域 元素对象

            switch (c) { //条件语句

                case "jx": area.innerHTML = "<option>抚州市</option><option>南昌市</option><option>赣州市</option><option>宜春市</option>";

                    break;

                case "gd": area.innerHTML = "<option>广州市</option><option>韶关市</option><option>佛山市</option><option>东莞市</option>";

                    break;

                case "fj": area.innerHTML = "<option>泉州市</option><option>厦门市</option><option>福州市</option><option>漳州市</option>";

                    break;

                case "hn": area.innerHTML = "<option>长沙市</option><option>湘潭市</option><option>乐昌市</option><option>郴州市</option>";

                    break;

                default: alert("error");

            }

        };

    </script>

</head>

<body>

    <select id="city" onchange="fn()"> <!--下拉框的改变事件-->

        <option value="jx">江西</option>

        <option value="gd">广东</option>

        <option value="fj">福建</option>

        <option value="hn">湖南</option>

    </select>

    <select id="area">

        <option>抚州市</option>

        <option>南昌市</option>

        <option>赣州市</option>

        <option>宜春市</option>

    </select>

</body>

</html>

2.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

    <select id="one">

        <option>请输入省份</option>

    </select>

    <select id="two">

        <option>请输入市</option>

    </select>

    <select id="three">

        <option>请输入区</option>

    </select>

    <script type="text/javascript">

        var oone = document.getElementById("one"); //获得下拉框元素对象

        var otwo = document.getElementById("two"); //获得下拉框元素对象

        var three = document.getElementById("three");//...

        var str = ''; //定义一个空字符串

        otwo.disabled = true; //禁用元素

        three.disabled = true; //禁用元素

        //包含多个个对象的数组

        var arr1 = [

            { "id": "1", "value": "北京" },

            { "id": "2", "value": "上海" },

            { "id": "3", "value": "重庆" },

            { "id": "4", "value": "天津" },

            { "id": "5", "value": "山东" }

        ];

        for (var i = 0; i < arr1.length; i++) { //遍历这个对象数组

            str += "<option value=" + arr1[i].id + ">" + arr1[i].value + "</option>"

        }

        oone.innerHTML = str;                              //添加下拉框1  【添加内容】

        var arr2 = { //json对象  ,这是一个拥有一个1【多个数组】的对象

            '1': ['101@北京'],

            '2': ['201@上海'],

            '3': ['301@重庆'],

            '4': ['401@天津'],

            '5': ['501@济南', '502@青岛']

        };

        oone.onchange = function () {                     //下拉框1内容改变事件

            var val = this.value; //获取选择项value值

            var arrA = arr2[val]; //调用json对象的值

            var str1 = '<option>请输入市</option>';

            for (var j = 0; j < arrA.length; j++) { //遍历json对象的值

                var aaa = arrA[j].split('@');//分割字符串 返回字符串数组

                str1 += "<option value=" + aaa[0] + ">" + aaa[1] + "</option>"

            }

            otwo.innerHTML = str1;                         //下拉框2 【添加内容】

            otwo.disabled = false; //下拉框元素启用

            three.innerHTML = '<option>请输入区</option>'; //下拉框3 【添加内容】

            //three.disabled = 'disabled'; //下拉框3禁用元素

            three.disabled = true; //下拉框3禁用元素

        }

        var arr3 = {

            '101': ['朝阳区', '昌平区'],

            '201': ['宝山区', '浦东区'],

            '301': ['不知道'],

            '401': ['真的不知道'],

            '501': ['市中区', '历下区', '槐荫区'],

            '502': ['市南区', '市北区', '崂山区']

        };

        otwo.onchange = function () { //下拉框2内容改变事件

            var val = this.value; //获取选择项value值

            var str2 = '<option>请输入区</option>';

            for (var l = 0; l < arr3[val].length; l++) { //遍历json对象的值

                str2 += "<option >" + arr3[val][l] + "</option>"

            }

            three.innerHTML = str2;    //                  //下拉框3 【添加内容】

            three.disabled = false;  //取消禁用元素

        }

    </script>

</body>

</html>

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

  1. 原生js二级联动

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...

  2. Ext.js二级联动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...

  3. js二级联动

    <body> <section> <a>省份</a> <select id="province"> <option ...

  4. xml+js+html的二级联动

    首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...

  5. 省市二级联动--使用app-jquery-cityselect.js插件

    只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...

  6. JS实现下拉单的二级联动

    因工作需要,做了一个下拉单的二级联动. 第一级是固定的选项,有A.B两个选项,第二级的选项随着第一级选项的变化而变化. 一开始是这样的: HTML代码 <html> <head> ...

  7. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  8. js：二级联动示例

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  9. js小例子之二级联动

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

随机推荐

  1. Ch’s gift

    Ch’s gift Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Proble ...

  2. asp.net--mvc--异步编程

    Using Asynchronous Methods in ASP.NET MVC 4 asp.net mvc中的异步只能增加系统的性能,原来需要500个线程的,现在需要50个就够了,对一些常规的程序 ...

  3. Java多线程之如何确定线程数

    关于多线程的线程数的确定,最近研读过几篇paper,在此做一下笔记,方便使用时翻看. 1.<Java 虚拟机并发编程>中介绍 就是说:线程数 =  CPU的核心数 * (1 - 阻塞系数) ...

  4. Linux环境变量设置命令export（转）

    Linux export命令用于设置或显示环境变量. 在shell中执行程序时,shell会提供一组环境变量.export可新增,修改或删除环境变量,供后续执行的程序使用.export的效力仅及于该次 ...

  5. 开源GIS软件 1

    1. 在线地图浏览器 GMap.NET GMap.NET 是一个强大.免费.跨平台.开源的.NET控件,它在Windows Forms 和WPF环境中能够通过Google, Yahoo!, Bing, ...

  6. Ubuntu 17.10安装phpMyAdmin数据库管理工具

      和Windows下各种双击安装直接使用的数据库管理工具不同,Linux下的数据库管理工具显得有些稍稍复杂.由于版权和收费限制,很多好用的数据库管理工具例如Data Grip和Navicat不能直接 ...

  7. AngularJS：实现页面滚动到底自动加载数据的功能

    要实现这个功能,可以通过https://github.com/sroze/ngInfiniteScroll这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序ht ...

  8. PyQt5学习随笔01--计算一个目录里我们码的代码行数&amp;&amp;PyQt的多线程通信

    今天突然想知道自学习Python以来我一共码了多少行代码了,于是写了一个简单的程序: __author__ = 'jiangzhiheng' # coding=utf-8 from PyQt5.QtC ...

  9. OC基础回想（十二）协议

    在OC基础(十一)中我们讨论了类别和非正式协议的奇异之处.在使用非正式协议时.能够仅仅实现你想要获得响应的方法.也不必在对象中声明不论什么内容来表示该对象可用作托付对象. 全部这些任务能够用最少的代码 ...

  10. C语言指针实现字符串的反转

    题目要求: 编敲代码:从键盘随意输入一个字符串,输出该字符串. 然后.将该字符串逆序存放后再输出,要求用字符指针完毕. 代码: //解法一 #include <stdio.h> #incl ...