<html>

<head>

    <title>html 下拉框级联</title>

    <meta charset="UTF-8"/>

    <style type="text/css">

        * {

            margin: 0px;

            padding: 0px;

        }

        .change {

            width: 800px;

            border: 1px solid red;

            margin: 50px auto;

            text-align: center;

        }

    </style>

</head>

<body>

<h1 style="text-align:center;"> java 开发多级数据联动系统 - Amy 老师 </h1>

<div class="change">欢迎同学来到谭州学院试听课程！！！<br/>

    <div style="text-align:center;margin:10px auto;">省份：

        <select style="width:150px;height:23px;line-height:30px;" id="province" onchange="city_change(this)">

        </select>

    </div>

    <div style="text-align:center;margin:10px auto;">城市：

        <select style="width:150px;height:23px;line-height:30px;" id="city" onchange="area_change(this)">

        </select>

    </div>

    <div style="text-align:center;margin:10px auto;">区域：

        <select style="width:150px;height:23px;line-height:30px;" id="area">

        </select>

    </div>

</div>

<script type="text/javascript" src="/Script/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

    var datas = {

        province: [{

            "id": 1001,

            "name": "湖南省"

        }, {

            "id": 1002,

            "name": "黑龙江省"

        }],

        city: {

            "1001": "100101#长沙市,100102#郴州市",

            "1002": "100201#哈尔滨市,100202#黑河市"

        },

        area: {

            "100101": "10010101#芙蓉区,100101#雨花区",

            "100102": "10010201#长沙区,100102#郴州区",

            "100201": "10020101#南岗区,10020102#大理区",

            "100202": "10020201#哈尔滨区,10020202#黑河区"

        }

    }

    $(function () {

        init_province(); // 初始化省份数据

    })

    function init_province() {

        $("#city").empty()

        $("#area").empty()

        $("#province").append("<option>----请选择省份----</option>");

        var provinceArr = datas.province;   // 得到省份数组

        for(var i=0;i<provinceArr.length;i++){

            $("#province").append("<option value='" + provinceArr[i].id + "'>"+ provinceArr[i].name +"</option>");

        }

    }

    function city_change(obj) {

        $("#city").empty()

        $("#area").empty()

        var value=obj.value;    // 获取选中的省份

        // 根据省份的 id，找到对应的城市

        var cityDates = datas["city"][value];

        // 解析城市数据

        var citys = cityDates.split(",");

        // 添加 默认选项

        $("#city").append("<option>---请选择市---</option>");

        // 遍历数据对象

        for(var i =0;i<citys.length;i++){

            var v = citys[i].split("#");

            var cityId = v[0];

            var cityName = v[1];

            $("#city").append("<option value='" + cityId + "'>"+ cityName +"</option>");

        }

    }

    function area_change(obj) {

        $("#area").empty()

        var value=obj.value;    // 获取选中的省份

        // 根据省份的 id，找到对应的城市

        var areaDates = datas["area"][value];

        // 解析城市数据

        var areas = areaDates.split(",");

        $("#area").empty()

        // 添加 默认选项

        $("#area").append("<option>---请选择市---</option>");

        // 遍历数据对象

        for(var i =0;i<areas.length;i++){

            var v = areas[i].split("#");

            var areaId = v[0];

            var areaName = v[1];

            $("#area").append("<option value='" + areaId + "'>"+ areaName +"</option>");

        }

    }

</script>

</body>

</html>

[转]html 下拉框级联的更多相关文章

  1. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

  2. Jquery+Ajax下拉框级联查询

  3. EasyUI下拉框级联

    EasyUI用来实现后台界面还是可以的,毕竟面对的是小众群体而非广大的用户,简单为美.这里想聊的功能是一种下拉框的联动,比如我选中了下拉框A的某一项,那么下拉框B的选项就是甲乙丙丁,如果我选了A的另一 ...

  4. java 下拉框级联及相关（转）

    ActionLintsner都实现此接口,其它监听器可以监听的事件都可以被它捕获 public interface ActionListener extends EventListenerThe li ...

  5. MVC+knocKout.js 实现下拉框级联

    数据库:部门表和员工表 在控制器里面的操作: public ActionResult Index3() { ViewBag.departments = new SelectList(getDepart ...

  6. ajax,下拉框级联

    js代码: $(document).ready(function() { $("#type1").change(function(){ var type1Code=$(" ...

  7. 基于Bootstrap的下拉框插件bootstrap-select

    写在前面: 在这次的项目中,没有再使用liger-ui做为前端框架了,改为了Bootstrap,这次也好接触下新的技术,在学习的过程中发现,Bootstrap的一些组件基本都是采用class的形式,就 ...

  8. struts-hibernate-ajax完成区县和街道级联下拉框功能(二补充使用json解析list结果集，ajax循环json层级处理)

    针对<struts-hibernate-ajax完成区县和街道级联下拉框功能>进行补充,上一篇中,要在action中拼接JSON格式字符串,很容易手抖.直接用json处理一下转成json格 ...

  9. 下拉框数据的动态选择，类似级联ajax刷新数据

    简单的两个下拉列表,第二个中的数据与第一个下拉框相关: --------------------var selected = $(this).children('option:selected').v ...

随机推荐

  1. selenium安装后，需要安装浏览器驱动

    google的驱动:chromedriver.exe 驱动版本与chrome版本对应的目录: http://npm.taobao.org/mirrors/chromedriver/2.32/notes ...

  2. 理解 js的 async/await

    async 和await 在干什么? async  用于声明一个function是异步的 await用于等待一个异步方法执行完成(其实我理解的是等待的是一个表达式,就是一个结果), 其中  await ...

  3. UIApplication的详细介绍

    UIApplication 什么是UIApplication? UIApplication对象是应⽤程序的象征.每一个应用都有⾃己的UIApplication对象,这个对象是系统自动帮我们创建的, 它 ...

  4. Thrift之双向通讯

    在实际应用中,却经常会有客户端建立连接后,等待服务端数据的长连接模式,也可以称为双向连接.一.双连接,服务端与客户端都开ThriftServer如果网络环境可控,可以让服务端与客户端互相访问,你可以给 ...

  5. PAT 天梯赛 是否完全二叉搜索树   (30分)（二叉搜索树 数组）

    将一系列给定数字顺序插入一个初始为空的二叉搜索树(定义为左子树键值大,右子树键值小),你需要判断最后的树是否一棵完全二叉树,并且给出其层序遍历的结果. 输入格式: 输入第一行给出一个不超过20的正整数 ...

  6. OO面向对象 课程总结

    测试与正确性论证的效果差差异 测试和正确性论证都是对程序进行可靠性的验证. 测试: IEEE提出了对软件测试的定义:使用人工或者自动的手段来运行或测定某个系统的过程,其目的在于检验它是否满足规定的需求 ...

  7. 使用pace监控ajax踩过的坑

    使用vue.js开发移动端的活动页面时,有时候会出现因为请求的数据没有返回而使得当前活动页结构混乱或者不美观,这个时候可以考虑使用pace.js,通过设置参数值,在ajax全部请求结束之前显示load ...

  8. 转：Oracle日期周详解以及周开始结束时间计算

    目录(?)[-] ORACLE中周相关知识描述 日期格式化函数 日期时间运算函数 根据给定时间取一周的开始时间和结束时间 根据给定周数取一周的开始时间和结束时间 获取一年的最大周次 特别应该注意的地方 ...

  9. Buildroot Qt 5

    /********************************************************************************* * Buildroot Qt 5 ...

  10. Executor 框架详解

    框架最核心的类是ThreadPoolExecutor,它是Java线程池的实现类,通过Executors工具类,可以创建3种类型的ThreadPoolExecutor: 首先附上ThreadPoolE ...