js 二级联动

<!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>

<!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 二级联动的更多相关文章

原生js二级联动
今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签是下拉列表 var sel = document.createElement(& ...
Ext.js二级联动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...
js二级联动
<body> <section> <a>省份</a> <select id="province"> <option ...
xml+js+html的二级联动
首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市内容如下: <?xml version="1.0" encoding="U ...
省市二级联动--使用app-jquery-cityselect.js插件
只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...
JS实现下拉单的二级联动
因工作需要,做了一个下拉单的二级联动. 第一级是固定的选项,有A.B两个选项,第二级的选项随着第一级选项的变化而变化. 一开始是这样的: HTML代码 <html> <head> ...
利用JS实现一个简单的二级联动菜单
前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...
js：二级联动示例
联动原理当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据把省市数据,保存在js文件中,以json形式保存,以便读取 ...
js小例子之二级联动
联动原理当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据把省市数据,保存在js文件中,以json形式保存,以便读取 ...

随机推荐

Boolean Expressions
Boolean Expressions Time Limit: 1000MS Memory Limit: 30000K Description The objective of the ...
cogs 290. [CTSC2000] 丘比特的烦恼
290. [CTSC2000] 丘比特的烦恼 ★★★ 输入文件:cupid.in 输出文件:cupid.out 简单对比时间限制:1 s 内存限制:128 MB 随着社会的不断发展,人 ...
HDU 4360
题意很好理解. 由于点是可以重复到达的,但可能每次经过路径的标志不一样,所以可以设每个点有四种状态"L”,'O','V','E'.然后按这些状态进行求最短路,当然是SPFA了. #inclu ...
ZZUOJ-1195-OS Job Scheduling（郑州大学第七届ACM大学生程序设计竞赛E题）
1195: OS Job Scheduling Time Limit: 2 Sec Memory Limit: 128 MB Submit: 106 Solved: 35 [id=1195&quo ...
揭秘传智播客班级毕业薪资超7k的内幕系列之四----汽车工的华丽转身
---不是本科毕业?不是计算机专业?做过电子厂?做过数控?看传智中专生侃项目,"侃晕"项目经理.从流水线上华丽转身,8.5k高薪再就业系列三承诺写写上海传智J ...
UVA 11021 - Tribles(概率递推)
UVA 11021 - Tribles 题目链接题意:k个毛球,每一个毛球死后会产生i个毛球的概率为pi.问m天后,全部毛球都死亡的概率思路:f[i]为一个毛球第i天死亡的概率.那么 f(i)=p ...
opencv源代码分析之二：cvhaartraining.cpp
我使用的是opencv2.4.9.安装后.我的cvboost..cpp文件的路径是........\opencv\sources\apps\haartraining\cvhaartraining.cp ...
蓝桥杯--2011--购物券（dfs）
公司发了某商店的购物券1000元,限定只能购买店中的m种商品.每种商品的价格分别为m1,m2,-,要求程序列出所有的正好能消费完该购物券的不同购物方法. 程序输入: 第一行是一个整数m,代表可购 ...
P3387 【模板】缩点 tarjan
虽说是模板题,但是竟然中间有dp的部分...先tarjan缩点,重新建图.然后记忆化搜索,搜索dag中的最小环. 题干: 题目背景缩点+DP 题目描述给定一个n个点m条边有向图,每个点有一个权值, ...
bzoj3211: 花神游历各国(线段树) 同codevs2492
3211: 花神游历各国 Time Limit: 5 Sec Memory Limit: 128 MBSubmit: 3628 Solved: 1326[Submit][Status][Discu ...

js 二级联动

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

随机推荐

热门专题