easyUI下拉列表三级联动
首先是先想好数据库的搭建，通过地区id，地区名称，上级地区id就可以实现，所有省市区的数据
例如：
DAO层
service层
Servlet
页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>修改员工</title>
<!-- 顺序不可以乱 -->
<!-- 1.jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
<!-- 2.css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
<!-- 3. 图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
<!-- 4.easyui的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<!-- 5.本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script> </head>
<body>
修改员工的页面
<br><br>
<input class="easyui-combobox" id="cc1"
data-options="url:'json/combox.json',
valueField:'id',
textField:'text', "> <br><br>
省：<input id="sheng" class="easyui-combobox" style="width:100px"
data-options="
url:'RegionServlet?parentid=0',
valueField:'regionID',
textField:'regionName',
onSelect:function(region){
//alert('选择了省id='+region.regionID);
$('#shi').combobox('clear');//清除原有项目
$('#qu').combobox('clear');//清除原有项目
$('#shi').combobox('reload','RegionServlet?parentid='+region.regionID);//重新加载
$('#qu').combobox('reload','RegionServlet')//清楚原有下拉项目
}" /> 市：<input id="shi" class="easyui-combobox" style="width:100px"
data-options="
url:'RegionServlet',
valueField:'regionID',
textField:'regionName',
onSelect:function(region){
//alert('选择了市id='+region.regionID);
$('#qu').combobox('clear');//清除原有项目
$('#qu').combobox('reload','RegionServlet?parentid='+region.regionID); }" /> 区：<input id="qu" class="easyui-combobox" style="width:100px"
data-options="
url:'RegionServlet',
valueField:'regionID',
textField:'regionName'" />
</body>
</html>
注意：在三级联动的时候要清除原有项目和清除下一级的下拉数据，否则就会出现在改变省份的时候，市区这两个下拉框还会显示上次所选的省份的所在市区。
easyUI下拉列表三级联动的更多相关文章
- MVC 下拉列表三级联动
当前所做的项目,关于数据库设计的时候有点小意思,表A是三个联合主键,key1,key2,key3,表B是四个联合主键 key1,key2,key3,key4,其中表B的联合外键关联表A对应的联合主键, ...
- JAVA EE 中之AJAX 无刷新地区下拉列表三级联动
JSP页面 <html> <head> <meta http-equiv="Content-Type" content="text/html ...
- Ajax省市地区下拉列表三级联动
SQL数据库表 --创建Province表 CREATE TABLE [dbo].[Province]( [Id] [int] NULL, [Name] [varchar](50) NULL, [or ...
- Easyui表单之下拉列表的三级联动
一.实现三级联动需要连接数据库 二.需要JSON数据的解析 三.需要Servlet类与界面相对应值的传递 1. 界面层需要的代码如下: <!DOCTYPE html> <html&g ...
- Android实现三级联动下拉框 下拉列表spinner
Android实现(省.市.县)三级联动下拉框 下拉列表spinner 转载请注明出处: http://www.goteny.com/articles/2013/11/46.html http://w ...
- Java下使用Apache POI生成具有三级联动下拉列表的Excel文档
使用Apache POI生成具有三级联动下拉列表的Excel文档: 具体效果图与代码如下文. 先上效果图: 开始贴代码,代码中部分测试数据不影响功能. 第一部分(核心业务处理): 此部分包含几个方面: ...
- easyui commobox省市区县三级联动
1.前端代码 <div class="col-6 f-group"> <label class="col-4 left_red"> 省名 ...
- JavaScript 三级联动
附件连接下载地址:http://files.cnblogs.com/files/CaktyRiven/js.zip <!DOCTYPE html> <html lang=" ...
- Webform——中国省市三级联动以及IsPostBack
首先要明白Webform的运行顺序,当开始启动时候,首先执行的是Page_Load事件, 当点击任意按钮后,每次点击都要先执行一遍Page_Load(在这里Page_Load里面的事件是给数据控件加载 ...
随机推荐
- 大熊君学习html5系列之------XHR2（XMLHttpRequest Level 2）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- [Scala] akka actor编程（一）
Akka基础 Akka笔记之Actor简介 Akka中的Actor遵循Actor模型.你可以把Actor当作是人.这些人不会亲自去和别人交谈.他们只通过邮件来交流. 1. 消息传递 2. 并发 3 ...
- 前端开发者进阶之函数柯里化Currying
穆乙:http://www.cnblogs.com/pigtail/p/3447660.html 在计算机科学中,柯里化(英语:Currying),又译为卡瑞化或加里化,是把接受多个参数的函数变换成接 ...
- HK&&CC JS学习：第一周——NO.2this
1)常用的命名规范: aXXXX:aBtn 说明获取的是一组元素:--类数组 oXXX:oBtn 说明获取的是一个元素->对象 对象有两个重要的特点:属性 和 方 ...
- iOS上架ipa上传问题那些事
iOS上架ipa上传问题那些事 原文: http://www.jianshu.com/p/1e22543285c2 字数513 阅读312 评论0 喜欢1 通过xcode直接打包上传,不会提示你的ip ...
- linux——常用命令与脚本
linux常用命令 --文件管理pwd --查看当前目录cd --切换当前目录ls --列出当前目录下的所有文件touch --创建文件mkdir --建立目录rmdir --删除空目录rm --删除 ...
- 去掉UITableView多余的空白行分割线
一.问题描述 在学习和开发中经常会遇到下面的问题,UITableView的UITableViewCell很少或者没有时,但UITableView有很多的空白行分割线.如下图: 如何去掉UITableV ...
- go：系统参数or函数--未完
系统参数: os.Args 存放命令参数的字符串数组,其中os.Arg[0]为命令本身的路径,其余项存放输入的参数 例:$ go run myapp.exe -d /home os.Args[0]: ...
- push 到下一界面明显卡顿的现象
今天搭建界面,界面间的跳转使用了 push方法,结果发现界面间转换时有明显的卡顿现象,并没有做过数据请求之类的处理,所以感觉好神奇.以前好像也遇到过,当时在push 到的下级界面加个背景色.现在重新这 ...
- Android -- Activity,Fragment lifecycle
Activity Lifecyce Fragment Lifecycle: 程序运行: 09-16 13:59:22.883 19022-19022/com.example.android.archi ...