jsp Select 级联

最新推荐文章于 2021-05-14 14:05:25 发布

iteye_18341

最新推荐文章于 2021-05-14 14:05:25 发布

阅读量231

点赞数

CC 4.0 BY-SA版权

分类专栏： web技术文章标签： java javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_18341/article/details/82601552

web技术专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个用于查询营业环节结算支出的报表系统。该系统支持不同层级部门的数据查询，并可根据结算周期筛选数据。通过多级下拉选择框实现从省级到支局级别的逐级查询。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@page import="java.util.Map"%>
<%@page import="java.util.List"%>
<%@page contentType="text/html; charset=GBK"%>
<%@taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles"%>
<%@taglib uri="/WEB-INF/struts-nested.tld" prefix="nested"%>
<%@taglib uri="/WEB-INF/struts-logic.tld" prefix="logic"%>
<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>
<%@page import="com.ist.util.db.Result"%>

<%
String deptcode = (String) request.getSession().getAttribute(
"deptcode");
int depttype = Integer.parseInt((String) request.getSession()
.getAttribute("depttype")); //一级部门
String reportid = request.getParameter("reportid");
String[] deptTitle = new String[] { "省", "市", "县/区", "支" };
String title0 = "";
String title1 = null;
String title2 = null;
String title3 = null;
if (1 == depttype) { //一级部门
title0 = "全省";
title1 = "市";
title2 = "县";
title3 = "支";
} else { //不是省级部门
if (depttype < deptTitle.length)
title1 = deptTitle[depttype];
if (depttype < deptTitle.length - 1)
title2 = deptTitle[depttype + 1];

if (depttype < deptTitle.length - 2)
title3 = deptTitle[depttype + 2];

if (title1 != null)
title0 = "全" + deptTitle[depttype - 1];
}
%>
<html>
<title>营业环节结算支出表</title>
<script src="/js/cssjs.js" type="text/javascript"></script>
<script src="/js/zfwl.js" type="text/javascript"></script>
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

function lstLowLowerDept(lowerDeptObj,lowerLowDeptObj){
lowerLowDeptObj.options.length = 0;
var o = lowerDeptObj.options; //上级机构长度
for(var i=0; i<o.length; i++) {
if(o[i].selected) { //选中第几行
var deptCode=o[i].value;
var strUrl = "/report.do?command=QueryInfo&deptCode="+deptCode+"&reportid=<%=reportid%>" ;
jQuery.ajax({
type : "POST",
async: false,
url :strUrl,
data : "",
success : function callback(data) {
var optionValue= eval("("+data+")");
for(var i=0;i<optionValue.length;i++){
lowerLowDeptObj.options.add(new Option(optionValue[i].deptName,optionValue[i].deptCode)); //添加新的option
}
}
});
}
}
}

//js数组三个标题
var deptTitle = new Array("<%=title1%>","<%=title2%>","<%=title3%>");
function getForm() {
return reportForm;
}
function doSubmit(no) {
var theForm = getForm();
var html = "";
if(no != 0) { //不是查询qua'she
// var deptObj = no==1? theForm.dept1:theForm.dept2;
var deptObj=null;
if(no==1){
deptObj= theForm.dept1;
}else if(no==2){
deptObj= theForm.dept2;
}else{
deptObj= theForm.dept3;
}
for(var i=0; i<deptObj.options.length; i++) {
if(deptObj.options[i].selected) {
html += "<input type='hidden' name='dept' value='"+deptObj.options[i].value.substring(deptObj.options[i].value.indexOf("|")+1)+"'>";
}
}

if(html=="") {
alert("请选择" + deptTitle[no-1] + "机构!");
return;
}

//查询第一个机构列表,且第二个机构列表存在
//则进入报表页面后还可继续往下查
if(no==1 && deptTitle[1]!="null") theForm.hasLower.value = "1";
else theForm.hasLower.value = "0";
}
else { //查询全省
html = "<input type='hidden' name='dept' value='<%=deptcode%>'>";
if(deptTitle[0]=="null" && deptTitle[1]=="null") theForm.hasLower.value = "0";
else {
if(deptTitle[0]!="null") theForm.hasLower.value = "1";
if(deptTitle[1]!="null") theForm.hasLower.value = "2";
}
}
document.all["deptDiv"].innerHTML = html;
openProcessBar();
theForm.submit();
}

function clearLowerLowdept(lowLowerDept){
lowLowerDept.options.length=0;
}

</script>
<link href="/css/themes/spread.css" rel="stylesheet" type="text/css"></link>
<link href="/css/themes/default.css" rel="stylesheet" type="text/css"></link>
<link href="/css/themes/alphacube.css" rel="stylesheet" type="text/css"></link>
<link href="/css/themes/alert.css" rel="stylesheet" type="text/css">
</link>
<link href="/css/themes/alert_lite.css" rel="stylesheet"
type="text/css">
</link>
<script type="text/javascript" src="/js/prototype/prototype.js"> </script>
<script type="text/javascript" src="/js/prototype/window.js"> </script>
<link href="/css/zfwl.css" type=text/css rel=STYLESHEET>
</HEAD>
<body vlink=#000000 alink=#000000 link=#000000 bgColor=#ffffff>
<html:form action="/report.do" method="post">
<input type="hidden" name="command" value="Query">
<input type="hidden" name="hasLower" value="0">
<input type="hidden" id="reportid" name="reportid" value="<%=reportid%>">
<div id="deptDiv"></div>

<div class=SectionTabTopBorder style="DISPLAY: block">
</div>
<div class=SectionTabBackground id=idSectionTabBackground
style="DISPLAY: block">
<table style="HEIGHT: 2em" border=0>
<tr>
<td class=TabCell>
<font class="beta" size="2"> <b>营业环节结算</b>
<span class="bg-neg-alert">»</span>
<b>营业环节结算支出表</b> </font>
</td>
</tr>
</table>
</div>

<table cellspacing=0 bordercolordark=#ffffff cellpadding=3
width="100%" align=center bordercolorlight=#000000 border=1>


<tr>
<td class="beta" style="font-weight:bold" width="60px">
结算周期:
</td>
<td colspan=10>
<logic:present name="lstSettlePeriod">
<html:select property="settlePeriod" style="width:130px">
<html:options collection="lstSettlePeriod" property="value"
name="LabelValueBean" labelProperty="label" />
</html:select>
</logic:present>
</td>
</tr>
<%
if (title1 != null || title2 != null|| title3 != null) {
%>


<tr>



<td class="beta" style="font-weight:bold" width="80px">
<%=title1%>
局:
</td>


<td>
<select name="dept1" style="width:180px;height:200px"
multiple="true"
onchange="lstLowerDept(getForm().dept1,getForm().dept2,lowerDeptArray),clearLowerLowdept(getForm().dept3)">
<%
Result cityDept = (Result) request.getAttribute("lstLowerDept");

if (cityDept != null) {
for (int i = 0; i < cityDept.size(); i++) {
%>
<option
value="<%=cityDept.getValue(i, "dept_id") + "|"
+ cityDept.getValue(i, "dept_code")%>">
<%=cityDept.getValue(i, "dept_name")%>
</option>
<%
}
}
%>
</select>
<br>
全选
<input type="checkbox"
onclick="selectAll(getForm().dept1);lstLowerDept(getForm().dept1,getForm().dept2,lowerDeptArray)" />
<input type="button" value=" 查询 " onclick="doSubmit(1)">
</td>


<%
if (title2 != null) {
%>
<td class="beta" style="font-weight:bold" width="80px">
<%=title2%>
局:
</td>
<td>
<select name="dept2" style="width:180px;height:200px"
multiple="true"
onchange="lstLowLowerDept(getForm().dept2,getForm().dept3)">
</select>
<br>
全选
<input type="checkbox" onclick="selectAll(getForm().dept2);" />
<input type="button" value=" 查询 " onclick="doSubmit(2)">
</td>
<%
}
%>

<%
if (title3!= null) {
%>

<td class="beta" style="font-weight:bold" width="80px">

<%=title3 %>
局:
</td>
<td>
<select name="dept3" style="width:180px;height:200px"
multiple="true">
</select>
<br>
全选
<input type="checkbox" onclick="selectAll(getForm().dept3);" />
<input type="button" value=" 查询 " onclick="doSubmit(3)">
</td>
<%
}
%>
</tr>
<%
}
%>
</table>
<input type="button" value=" 查询<%=title0%> " onclick="doSubmit(0)">
</html:form>
</body>
</html>
<script>
var lowerDeptArray = new Array();
<%
Result cityDept = (Result)request.getAttribute("lstLowlowerDept");
if(cityDept !=null) {
for(int i=0; i<cityDept.size(); i++) {
%>
lowerDeptArray.push(new Dept("<%=cityDept.getValue(i, "upper_dept_id")%>","<%=cityDept.getValue(i, "dept_id") + "|"
+ cityDept.getValue(i, "dept_code")%>","<%=cityDept.getValue(i, "dept_name")%>"));
<%
}
}
%>
//放第二个菜单的内容

</script>