首先是先想好数据库的搭建，通过地区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下拉列表三级联动的更多相关文章

  1. MVC 下拉列表三级联动

    当前所做的项目,关于数据库设计的时候有点小意思,表A是三个联合主键,key1,key2,key3,表B是四个联合主键 key1,key2,key3,key4,其中表B的联合外键关联表A对应的联合主键, ...

  2. JAVA EE 中之AJAX 无刷新地区下拉列表三级联动

    JSP页面 <html> <head> <meta http-equiv="Content-Type" content="text/html ...

  3. Ajax省市地区下拉列表三级联动

    SQL数据库表 --创建Province表 CREATE TABLE [dbo].[Province]( [Id] [int] NULL, [Name] [varchar](50) NULL, [or ...

  4. Easyui表单之下拉列表的三级联动

    一.实现三级联动需要连接数据库 二.需要JSON数据的解析 三.需要Servlet类与界面相对应值的传递 1. 界面层需要的代码如下: <!DOCTYPE html> <html&g ...

  5. Android实现三级联动下拉框 下拉列表spinner

    Android实现(省.市.县)三级联动下拉框 下拉列表spinner 转载请注明出处: http://www.goteny.com/articles/2013/11/46.html http://w ...

  6. Java下使用Apache POI生成具有三级联动下拉列表的Excel文档

    使用Apache POI生成具有三级联动下拉列表的Excel文档: 具体效果图与代码如下文. 先上效果图: 开始贴代码,代码中部分测试数据不影响功能. 第一部分(核心业务处理): 此部分包含几个方面: ...

  7. easyui commobox省市区县三级联动

    1.前端代码 <div class="col-6 f-group"> <label class="col-4 left_red"> 省名 ...

  8. JavaScript 三级联动

    附件连接下载地址:http://files.cnblogs.com/files/CaktyRiven/js.zip <!DOCTYPE html> <html lang=" ...

  9. Webform——中国省市三级联动以及IsPostBack

    首先要明白Webform的运行顺序,当开始启动时候,首先执行的是Page_Load事件, 当点击任意按钮后,每次点击都要先执行一遍Page_Load(在这里Page_Load里面的事件是给数据控件加载 ...

随机推荐

  1. 大熊君{{bb}}------春节期间你跳槽了吗？

    时间过的很快,转眼间又快过春节了,推荐你在春节期间跳槽,是基于以下几个原因: 1,命中率高 通常情况下,所有公司都会在年底进行一定幅度的裁员,而惟独这家公司在招工,这等于明摆着告诉公众他们现在面临严重 ...

  2. [Linux & Mysql] Linux下Mysql的基本操作

    1. 连接Mysql 1.1 连接到本机上的Mysql 键入命令mysql -u root -p,回车后提示你输密码.注意用户名前可以有空格也可以没有空格,但是密码前必须没有空格,否则让你重新输入密码 ...

  3. 亲历腾讯WEB前端开发三轮面试经历及面试题

    [一面]~=110分钟  2014/09/24 11:20  星期三 进门静坐30分钟做题. 填空题+大题+问答题 >>填空题何时接触电脑 何时接触前端运算符 字符串处理        延 ...

  4. 【bzoj3036】绿豆蛙的归宿

    题目描述 随着新版百度空间的下线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿. 给出一个有向无环的连通图,起点为1终点为N,每条边都有一个长度.绿豆蛙从起点出发,走向终点.到达每一个顶点时,如 ...

  5. plist中的中文数据

    直接打印那个值就会显示中文了,你打引整个 plist 文件的内容,则会显示出 NSUTF8 编码后的数据:请放心使用:

  6. Python自动化之一对多

    一对多 建立一对多关系之后(也就是加了外键),会在字表里面多一个"外键字段_id"这个字段 查询 #_*_coding:utf-8_*_ from django.db import ...

  7. re.search 和 re.match

    相同点: 都返回找到的第一个匹配对象 >>> import re >>> m = re.search('(\w+) (\w+)', 'aaa bbb ccc ddd ...

  8. 获取FIle路径下所有文件的地址和名称

    public static void getFileName(File[] files) { String address=""; if (files != null)// 先判断 ...

  9. linux 使用 nvidia 的 gpu

    第一种方法: [Wizard@Wizard ~]$ nvidia-detect kmod-nvidiaOptimus hardware detected: An Intel display contr ...

  10. node05-fs

    目录:node01-创建服务器 node02-util node03-events node04-buffer node05-fs node06-path node07-http node08-exp ...