<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. (转载)SAPI 包含sphelper.h编译错误解决方案

    [转]SAPI 包含sphelper.h编译错误解决方案 在使用Microsoft Speech SDK 5.1开发语音识别程序时,包含了头文件“sphelper.h”和库文件“sapi.lib”.编 ...

  2. git操作远端分支(转)

    http://www.cnblogs.com/Camier-myNiuer/p/5558884.html 原文地址:http://hi.baidu.com/lingzhixu/blog/item/4a ...

  3. if...then

    我到现在明白一些道理 有些事情是徒劳无功的 有些却不是 世间事不过如此,只要你肯付出相应的代价,你就可以得到.

  4. xml与json

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式. JSON现在基本上作为前后端数据交互的重要载体,在JSON之前,前后端主要的传输方式主要是通过XML或者文 ...

  5. NSSearchPathForDirectoriesInDomains用法(转)

    1. iPhone会为每一个应用程序生成一个私有目录,这个目录位于: /Users/sundfsun2009/Library/Application Support/iPhone Simulator/ ...

  6. Linux:man命令显示颜色

    man命令显示颜色 在.bashrc下添加 export LESS_TERMCAP_mb=$'\E[01;31m' export LESS_TERMCAP_md=$'\E[01;31m' export ...

  7. PAT  说反话-加强版   (20分)

    给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入格式: 测试输入包含一个测试用例,在一行内给出总长度不超过500 000的字符串.字符串由若干单词和若干空格组成,其中单词是由英文字母 ...

  8. QNX的深度嵌入过程

    QNX的深度嵌入过程   1.1           QNX目标系统嵌入 利用QNX的模块性和和可裁剪性,其嵌入过程一般是: 构建Buildfile -> 编译buildfile生成系统映象文件 ...

  9. Locust 其他协议

    Locust 是基于HTTP作为主要目标构建的,但是他同样可以扩展其他的协议,接受请求与获得返回.在编写的客户端的时候,我们就要使用到最常使用的 request_success 和 request_f ...

  10. 转:AMD规范与CMD规范的区别是什么?

    AMD规范与CMD规范的区别是什么?    在比较之前,我们得先来了解下什么是AMD规范?什么是CMD规范?当然先申明一下,我个人也是总结下而已,也是网上看到的资料,自己总结下或者可以说整理下而已,供 ...