<!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. 精彩的linux shell 命令

      1. Star Wars (telnet) telnet是基于Telnet协议的远程登录客户端程序,经常用来远程登录服务器.除此还可以用它来观看星球大战: telnet towel.blinken ...

  2. CodeForces - 284C - Cows and Sequence

    先上题目: C. Cows and Sequence time limit per test 3 seconds memory limit per test 256 megabytes input s ...

  3. [luogu2209][USACO13]燃油经济性Fuel Economy_贪心

    燃油经济性Fuel Economy 题目大意:FJ想要去旅行.他的车总容量为G,每行驶一个单位就消耗一个单位的油.FJ要行驶D个单位的距离.期间存在n个加油站,每个加油站有一个价格,表示在这个燃油站买 ...

  4. CODEVS——T 1049 棋盘染色

    http://codevs.cn/problem/1049/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descr ...

  5. vjudge B - Design T-Shirt

    B - Design T-Shirt 思路:水题,模拟即可. #include<cstdio> #include<cstring> #include<iostream&g ...

  6. 如何拿CSDN博客上的原图

    比如带水印的地址: http://img.blog.csdn.net/20140408122234546?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdT ...

  7. Axis2中使用wsdl2java.bat生成客户端代码

    1 准备环境 (1)下载Axis2的zip包axis2-1.5.5-bin.zip,并解压. 官方网址:http://ws.apache.org/axis2/ (2)设置环境变量(我的电脑->属 ...

  8. v$open_cursor的几个问题

    SQL order by SADDR desc ; SADDR SID USER ADDRESS HASH_VALUE SQL_ID SQL_TEXT -------- ---------- ---- ...

  9. java获取类名不包括路径

    class.getSimpleName(),就能获得仅仅的类名 class.getName()获得的是全路径的类名

  10. 编程算法 - 和为s的连续正整数序列 代码(C)

    和为s的连续正整数序列 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 输入一个正数s, 打印出全部和为s的连续正数序列(至少含有两个数). 起 ...