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里面的事件是给数据控件加载 ...
随机推荐
- [译] 你该知道的javascript作用域 (javascript scope)(转)
javascript有一些对于初学者甚至是有经验的开发者都难以理解的概念. 这个部分是针对那些听到 : 作用域, 闭包, this, 命名空间, 函数作用域, 函数作用域, 全局作用域, 变量作用域( ...
- “基础提供程序在Open上失败”
本来布置在IP为[x.x.x.x]的WCF服务好好的,但是今天突然就有问题了,一调用报错"基础提供程序在Open上失败"... 服务器上的有问题,先试试本地的服务能不能用吧,连的都 ...
- unix编程书中的 ourhdr.h代码
真心不知到里面写的具体什么意思,先记下吧. /*Our own header, to be included after all standard system headers*/ #ifndef _ ...
- (转)Intent flag 与启动模式的对应关系
原文地址:http://www.cnblogs.com/ttylinux/p/4069513.html Activity有四种启动模式: 1.standard(标准) 2.singleTop ...
- PHP的单态类——为了产生唯一的对象
pdo就是使用了单态类,使得对象永远只实例化一次,减少了内存消耗. 单态类: <?php class A{ private static $a = null; private function ...
- Opera Browser -- Access Restricted Sites using Free VPN /Free VPN Services List
Opera Browser -- Access Restricted Sites using Free VPN: currently the feature is available in Oper ...
- ubuntu下安装chrome
首先.题主在试过直接ubuntu终端命令安装chrome失败. 把经历过的错误稍微提一下: 在终端输入 下载安装包 sudo wget https://dl.google.com/linux/dire ...
- des (C语言)
/** * \file des.h * * \brief DES block cipher * * Copyright (C) 2006-2010, Brainspark B.V. * * This ...
- waxpatch修改任意类的用法
例如:修改一个UIView(PJView)的子类和一个NSObject(PJModel)类,则需要在patch.lua文件中声明这两个要修改的类 并且建立这些待修改的类的对应的.lua文件 对应的.l ...
- C的数值取反操作
今儿在代码中发现一句"return x? ~0 : 0;"对~0这个取反操作相关的知识又还给老师了.一查,查到下面一道题,弄过来贴上. //-------------------- ...