<!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. 利用fontforge制作自己的字体

    最近手伤了,写代码特别慢,索性就干干一些奇奇怪怪的事情. 发现我电脑上的中文字体很是奇怪,于是便去找了中英混合的等宽字体. 满足条件的只找到了YaHei Consolas Hybrid,是微软的Con ...

  2. Grails里的集成测试代码试例

    测试的命令,3和2不一样了,要找找.. User.groovy package com.grailsinaction class User { String loginId String passwo ...

  3. github的submodel错误

    原文地址 简要:直接把github上的仓库删除重建,本地的仓库也删除重建,再重新上传就OK了 最近想整理一下工作室官网的东西,那是一个用github pages写的网站,在上传一些post文章的时候, ...

  4. C语言之文件操作07——读取文件数据并计算均值方差标准差

    //文件 /* =============================================================== 题目:从文本文件"high.txt" ...

  5. 揭秘传智播客班级毕业薪资超7k的内幕系列之四----汽车工的华丽转身

         ---不是本科毕业?不是计算机专业?做过电子厂?做过数控?看传智中专生侃项目,"侃晕"项目经理.从流水线上华丽转身,8.5k高薪再就业      系列三承诺写写上海传智J ...

  6. hdu1116 Play on Words--并查集

    原题链接: pid=1116">http://acm.hdu.edu.cn/showproblem.php? pid=1116 一:原题内容 Problem Description S ...

  7. 项目记录23--unity-tolua框架MediatorManager

    我还存在!.!!! ! ! 这个类是管理全部模块,没什么好说就是个单例,之后还须要UIManager,SceneManager,DataManager... .慢慢来.不是还要上班做死的嘛,坑爹. M ...

  8. kafka的topic和分区策略——log entry和消息id索引文件

    Topic在逻辑上可以被认为是一个在的queue,每条消费都必须指定它的topic,可以简单理解为必须指明把这条消息放进哪个queue里. 为了使得Kafka的吞吐率可以水平扩展,物理上把topic分 ...

  9. java-com-util-common-service：BaseService.java

    ylbtech-java-com-util-common-service:BaseService.java 1.返回顶部 1. package com.shineyoo.manager.util.co ...

  10. 利用递归分割（Split）字符串

    利用递归分割(Split)字符串 SqlServer 递归 工作需要将表里的某个字段分割之后再插入到另一个表中,其实数据量不大,直接用游标一行一行的取,再利用循环来分割之后再实现数据的插入应该可以直接 ...