<!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. RestEasy用户指南---第6章.@QueryParam

    转载说明出处:http://blog.csdn.net/nndtdx/article/details/6870391 原文地址 http://docs.jboss.org/resteasy/docs/ ...

  2. hdu 1569 最大权独立集

    /*最大点权独立集=sum-最小点权覆盖*/ #include<stdio.h> #include<string.h> #include<queue> using ...

  3. SecureCRT的设置和美化

    一  . SecureCRT 7.1  的 安装     http://liufei888.blog.51cto.com/2625545/1306231 1.下载注册机SecureCRT.v.6.7. ...

  4. MVC.Net：MVC.Net与WebAPI的IOC实现

    我们通过Ninject(http://www.ninject.org/)项目来帮助我们实现MVC.Net与WebAPI项目的IOC实现. 首先我们来看MVC.Net的IOC实现. 1. 通过NuGet ...

  5. 将XML文件转化成NSData对象

    NSData *xmlData = [[NSData alloc]initWithContentsOfFile:[NSString stringWithFormat:@"%@/People. ...

  6. Linux C程序存储空间的逻辑布局

    原文:http://blog.chinaunix.net/uid-20692625-id-3057053.html ------------------------------------------ ...

  7. 设计模式学习–Decorator

    What Decorator:动态地给一个对象加入一些额外的职责. 就添加功能来说.Decorator模式相比生成子类更加灵活. Why Decorator模式适用于能够动态的给对象增删职责.比方qq ...

  8. uva 11605 - Lights inside a 3d Grid(概率)

    option=com_onlinejudge&Itemid=8&page=show_problem&problem=2652" style=""& ...

  9. jsencrypt代码分析

    jsencrypt代码分析——openssl的rsa加密解密在js的实现   在js上做rsa,感觉jsencrypt这个是封装的比较好的,但用起来还是遇到了些坑,所以踩进代码里填填坑- 项目在这里  ...

  10. Codeforces Round #330 (Div. 2)B. Pasha and Phone 容斥

    B. Pasha and Phone   Pasha has recently bought a new phone jPager and started adding his friends' ph ...