首先是先想好数据库的搭建，通过地区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. 关于 Word Splitting 和 IFS 的三个细节

    在 Bash manual 里叫 Word Splitting,在 Posix 规范里叫 Field Splitting,这两者指的是同一个东西,我把它翻译成“分词”,下面我就说三点很多人都忽略掉(或 ...

  2. hadoop源码编译——2.5.0版本

    强迫症必治: WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using b ...

  3. 如何学习JavaScript

    Javascript是我大学里面做网站兴趣,加上进一年维护公司javascript相关的框架. 顺便回顾一下自己学习 javascript 的相关方法和技巧,分享给需要的朋友. 1.base 基础.兼 ...

  4. 【Alpha版本】项目总结

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬涛 031402341 王 ...

  5. android studio--百度定位集成001

    安卓现在的大趋势已经是普遍使用androidstudio(安装包[https://yunpan.cn/ckc54idj3JVJb  访问密码 664f])了.这个是集成的一个好的环境. 今天来搞个百度 ...

  6. server2003中看不到网上邻居内容，其他电脑无法通过计算机名和IP访问本计算机（但网上邻居中可访问到）

    现象1:server2003中看不到网上邻居内容,查看工作组计算机看到的是空列表, 现象2:其他电脑无法通过计算机名和IP访问本计算机(但网上邻居中可访问到)   访问提示:--Windows 200 ...

  7. a0=1、a1=1、a2=a1+a0、a3=a2+a1，以此类推，请写代码用递归算出a30？

    public class Test { public static void main(String[] args) { System.out.println(recursive(30)); } pu ...

  8. SQL中inner join、outer join和cross join的区别

    对于SQL中inner join.outer join和cross join的区别简介:现有两张表,Table A 是左边的表.Table B 是右边的表.其各有四条记录,其中有两条记录name是相同 ...

  9. c语言for循环

    #include<stdio.h>#include<windows.h>#include <limits.h>#include <math.h>void ...

  10. SQL IN ANY ，（all any） 区别

    EXITS 和 IN 的区别: 从效率来看: 1) select * from T1 where exists(select 1 from T2 where T1.a=T2.a) ; T1数据量小而T ...