首先是先想好数据库的搭建，通过地区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. Pandas-多表操作

    Pandas包对多个数据表(DataFrame)的常用整合功能. 目录 merge join concat append combin_first merge 合并 pandas.merge可根据一个 ...

  2. [Python] 网络爬虫和正则表达式学习总结

    以前在学校做科研都是直接利用网上共享的一些数据,就像我们经常说的dataset.beachmark等等.但是,对于实际的工业需求来说,爬取网络的数据是必须的并且是首要的.最近在国内一家互联网公司实习, ...

  3. JavaScript - 对象

    1.对象(Object)或实例(instance):在JavaScript中,对象则是数据与程序代码的组合,它可以是整个应用程序或整个应用程序的一部分. 2.属性(property)或字段(filed ...

  4. iframe的自适应高度

    <iframe src="index.html" id="iframepage" name="iframepage" frameBor ...

  5. Linux进程间通信（九）：数据报套接字 socket()、bind()、sendto()、recvfrom()、close()

    前一篇文章,Linux进程间通信——使用流套接字介绍了一些有关socket(套接字)的一些基本内容,并讲解了流套接字的使用,这篇文章将会给大家讲讲,数据报套接字的使用. 一.简单回顾——什么是数据报套 ...

  6. 07OC之KVC、KVO

    在OC中,有着很多动态的特性,今天我们着重讲讲OC中的键值编码(KVC)和键值监听(KVO)特性. 一.键值编码(KVC) 在C#中,我们可以通过反射的方式动态去读写一个对象,有时候很方便,因为可以利 ...

  7. jQuery源码笔记(二)：定义了一些变量和函数 jQuery = function(){}

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  8. jquery-常用的运行函数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 二叉树建立，遍历和二叉排序树的判断【c++】

    // test.cpp : Defines the entry point for the console application. // #include "stdafx.h" ...

  10. cocoaPods 的使用

    打开 终端 1. 移除系统自带的 因为该rub已经被和谐了 使用ruby.taobao.org MCJ:~ MCJ$ sudo gem sources -l *** CURRENT SOURCES * ...