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里面的事件是给数据控件加载 ...
随机推荐
- Android JSON、GSON、FastJson的封装与解析
声明: 1.本帖只提供代码,不深入讲解原理.如果读者想要深入了解,那就不要在这个帖子上浪费时间了 2.客户端用的是Google官方的Volley访问服务器,具体了解Volley请戳 这里 3.本帖三种 ...
- [Data Structure & Algorithm] 七大查找算法
查找是在大量的信息中寻找一个特定的信息元素,在计算机应用中,查找是常用的基本运算,例如编译程序中符号表的查找.本文简单概括性的介绍了常见的七种查找算法,说是七种,其实二分查找.插值查找以及斐波那契查找 ...
- 如何修改 Total commander 配置文件的路径
在官方主页 http://www.ghisler.com/tools.htm#other 上提供了一个名为 INIreloc.exe 的小程序,它可以变更ini文件的保存位置.
- PHP正则表达式详解（二）
前言: 在本文中讲述了正则表达式中的组与向后引用,先前向后查看,条件测试,单词边界,选择符等表达式及例子,并分析了正则引擎在执行匹配时的内部机理. 本文是Jan Goyvaerts为RegexBudd ...
- iOS开发——高级篇——音频、音乐播放（封装类）
一.简介 简单来说,音频可以分为2种音效又称“短音频”,通常在程序中的播放时长为1~2秒在应用程序中起到点缀效果,提升整体用户体验 音乐比如游戏中的“背景音乐”,一般播放时间较长 播放音频可以使用框架 ...
- $.prop()和$.attr() 区别用法
都用于读取和设置DOM元素节点的属性 不同: $.attr()用于DOM元素本身的属性 $.prop()用于DOM节点对应的JS属性(源于DOM元素到JS对象的映射) 源于两者在jquery类库的实现 ...
- Rails 实现多对多自连接
1. 先生成关联代码 class WorkConnect < ActiveRecord::Base belongs_to :working, class_name: "Company& ...
- Python自动化之一对多
一对多 建立一对多关系之后(也就是加了外键),会在字表里面多一个"外键字段_id"这个字段 查询 #_*_coding:utf-8_*_ from django.db import ...
- Nginx的继续深入（日志轮询切割，重写，负载均衡等）
Nginx的访问日志轮询切割 通常什么情况Nginx会把所有的访问日志生成到一个制定的访问日志文件access.log里面,但时间一长,日志个头很大不利于日志的分析和处理. 有必要对Nginx日志进行 ...
- python 3.5.2 install pillow
1. 首先尝试从官网下载, pip install pillow, 结果网络不行,总是连不上或者下载中就失败, C:\Windows\system32>pip install pillowCol ...