jsp从数据库获取数据填充下拉框实现二级联动菜单的方法

本文实例讲述了jsp从数据库获取数据填充下拉框实现二级联动菜单的方法。分享给大家供大家参考，具体如下： 项目告一段落，现在将遇到的比较实用的东西记录下来，写了多遍了，谨记于此，以备查看！ 1、首先在数据库中获取第一个下拉框的数据： &lt;s:select listKey=tsFrom id=t_tsfrom cssClass=required listValue=tsFrom cssStyle=width:90 list=tsfrom1 name=tsFrom theme=simple headerKey= onchange=getTsFromDescrib 在开发Web应用时，我们经常需要实现交互性强的用户界面，比如二级联动菜单。这种功能在JSP（Java Server Pages）中可以通过与数据库交互来动态填充下拉框，并结合JavaScript和Ajax技术实现。本文将详细讲解如何使用JSP从数据库获取数据来填充下拉框，进而实现二级联动菜单。 我们需要在JSP页面中创建第一个下拉框，用于展示一级菜单。这个下拉框的数据是从数据库中获取的。例如： ```jsp <s:select listKey="tsFrom" id="t_tsfrom" cssClass="required" listValue="tsFrom" cssStyle="width:90" list="tsfrom1" name="tsFrom" theme="simple" headerKey="" onchange="getTsFromDescribe(this);" headerValue="--请选择--" /> ``` 这里的`<s:select>`标签是Struts2框架提供的，用于生成HTML select元素。`list`属性指定的是后台传入的列表数据，`onchange`事件触发时会调用`getTsFromDescribe`函数，实现二级菜单的动态加载。 在后台，我们通常会使用Service层和DAO层来处理数据。Service层调用DAO层的方法获取数据库中的数据。例如，DAO层可能有一个`getTsFrom()`方法，用于查询一级菜单的数据： ```java public List<CustomManage> getTsFrom() { return this.find("SELECT distinct new CustomManage(tsFrom,'2') FROM CustomManage C WHERE C.tsFrom IS NOT NULL ORDER BY tsFrom ASC"); } ``` 这里的SQL语句使用了`distinct`关键字去重，同时使用`new`关键字构建一个新的`CustomManage`对象，因为Oracle数据库在Java代码中去重时需要这种方式。在实体类`CustomManage`中，我们需要为这些字段提供构造方法，以便正确地设置属性值： ```java public CustomManage(String khname, int s) { this.khname = khname; } public CustomManage(String cpname, String type) { if ("1".equals(type)) { this.cpname = cpname; } else if ("2".equals(type)) { this.tsFrom = cpname; } else if ("3".equals(type)) { this.khname = cpname; } } ``` 当用户选择一级菜单后，前端会触发Ajax请求，获取二级菜单的数据。在JSP中，我们可以这样定义`getTsFromDescribe`函数： ```javascript function getTsFromDescribe(ts_describe) { var tsfrom = $("#t_tsfrom").val(); Ext.Ajax.request({ url: '${ctx}/complaints/complaints!getTsFrom.action', params: { tsfrom: tsfrom // 通过JSON形式将前台获取的值传递给后台 }, success: function(response) { var json = Ext.util.JSON.decode(response.responseText); if (json.success) { var data = json.cmList; if ("" == data) { alert("请选择投诉类型"); inputForm.t_tsfrom.focus(); $("#ts_tsFrom").empty(); // 每次需要将上一次的数据进行清空 } else { $("#ts_tsFrom").empty(); // 对获取到的数据进行迭代 for (var i = 0; i < data.length; i++) { var id = data[i]; var name = data[i]; $("#ts_tsFrom").append($("<option></option>").attr("value", id).text(name)); } } } } }); } ``` 这个函数使用了ExtJS的Ajax请求，向服务器发送一个包含当前一级菜单值的请求。成功返回后，根据返回的JSON数据（`cmList`是列表数据），动态创建并添加二级菜单的`<option>`元素。 总结来说，实现JSP中从数据库获取数据填充下拉框并实现二级联动菜单，主要涉及以下几个步骤： 1. 在JSP页面上创建下拉框，设置onChange事件。 2. 后台Service和DAO层处理数据，获取并处理一级菜单数据。 3. 实体类提供构造方法，确保数据正确映射。 4. 使用Ajax监听onChange事件，向服务器发送请求获取二级菜单数据。 5. 前端接收到响应后，动态创建二级菜单的选项。 这个过程结合了JSP、Struts2、JavaScript和Ajax，实现了用户交互性强的二级联动菜单功能，提高了用户体验。