实例:Easyui的combobox实现动态数据级联
实现从数据库中动态获取对应的List集合,并在Easyui的combobox中显示出来。
实现的效果如下:



1、数据库的表设计如图所示

2、数据库中填写相关的数据,如图所示。如图所示【法律法规】是所属栏目,因此他的字段parentid是0。【中国公民出国】、【内地居民往来港澳】是属于法律法规的类别。因此他们的字段parentid是对应1,【法律法规】的字段categoryid是1.

3、相关的配置:已经在前面的博客中写了http://blog.csdn.net/lhq13400526230/article/details/9158111
这里就不多写。只把关键代码贴出来。
4、对应的Action代码
<%@ page language="java" errorPage="/error.jsp" pageEncoding="utf-8"%><%@ taglib prefix="s" uri="/struts-tags"%><%String path = request.getContextPath();%><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>信息管理</title><!-- 引入Jquery --><script type="text/javascript" src="<%=path%>/easyui_1.3.2/jquery-1.8.0.min.js" charset="utf-8"></script><!-- 引入Jquery_easyui --><script type="text/javascript"src="<%=path%>/easyui_1.3.2/jquery.easyui.min.js" charset="utf-8"></script><!-- 引入easyUi国际化--中文 --><script type="text/javascript"src="<%=path%>/easyui_1.3.2/locale/easyui-lang-zh_CN.js"charset="utf-8"></script><!-- 引入easyUi默认的CSS格式--蓝色 --><link rel="stylesheet" type="text/css"href="<%=path%>/easyui_1.3.2/themes/default/easyui.css" /><!-- 引入easyUi小图标 --><link rel="stylesheet" type="text/css"href="<%=path%>/easyui_1.3.2/themes/icon.css" /><script type="text/javascript"> /* 初始化下载表格信息 */$(function() { // 下拉框选择控件,下拉框的内容是动态查询数据库信息$('#lanmu').combobox({ url:'itemManage!categorytbl', editable:false, //不可编辑状态 cache: false, panelHeight: 'auto',//自动高度适合 valueField:'categoryid', textField:'categoryName', onHidePanel: function(){ $("#leibie").combobox("setValue",'');var lanmuid = $('#lanmu').combobox('getValue');$.ajax({type: "POST",url: "itemManage!leibie?lanmuid="+lanmuid,cache: false,dataType : "json",success: function(data){$("#leibie").combobox("loadData",data); }}); } }); $('#leibie').combobox({ //url:'itemManage!categorytbl', editable:false, //不可编辑状态 cache: false, panelHeight: 'auto',//自动高度适合 valueField:'categoryid', textField:'categoryName' });});</script></head><body><!-- 工具拦 --><div id="tb" style="padding: 3px"> <form ><span>所属栏目:</span> <select id="lanmu" class="lanmu" style="width:160px; border: 1px solid #ccc"> </select><span>类别:</span> <select id="leibie" class="leibie" style="width:160px; border: 1px solid #ccc"> </select> </form></div></body></html>