`

jsp Select 级联

 
阅读更多
<%@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"> &nbsp; <b>营业环节结算</b>
&nbsp;&nbsp; <span class="bg-neg-alert">&raquo;</span>
&nbsp;&nbsp; <b>营业环节结算支出表</b> &nbsp; </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) {
%>

<!--tr2-->
<tr>
<!--左边机构栏-->

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

<!--td2-->
<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>






分享到:
评论

相关推荐

    jsp实现级联菜单 jsp实现级联菜单

    ### JSP实现级联菜单详解 #### 一、概述 级联菜单是Web应用程序中常见的一种交互设计方式,尤其在需要展示多层级数据结构时,如省份-城市选择器等场景下非常实用。通过级联菜单,用户可以方便地根据上一级的选择来...

    struts实现select级联

    以上就是使用Struts2实现select级联选择的基本流程。不连接数据库的情况,数据可以直接在Action中初始化。在实际项目中,数据通常从数据库中获取,因此级联Action需要根据用户选择的省份查询数据库并返回相应城市的...

    JSP页面中如何用select标签实现级联

    在JSP页面中实现select标签的级联效果,通常是为了解决具有层级关系的查询条件问题。级联下拉列表能够让用户在选择了某个特定选项之后,自动更新其他相关联的下拉列表的内容,从而实现数据的层次化筛选。 首先,要...

    JSP Ajax省市县Select级联菜单.rar

    【JSP Ajax省市县Select级联菜单】是一个典型的前端与后端交互的示例,它在Web应用中常用于实现动态、无刷新的选择区域(省、市、县)功能。这个压缩包包含了一个完整的解决方案,使得用户在选择省份时,对应的市区...

    JSP级联效果JSP级联效果JSP级联效果JSP级联效果JSP级联效果JSP级联效果

    根据提供的标题、描述以及部分代码内容,我们可以了解到这篇文章主要探讨的是如何在JSP(Java Server Pages)中实现级联选择框的效果。级联选择框通常用于处理多层级的数据结构,如国家-省份-城市这样的地理位置数据...

    JSP+JavaScript打造二级级联下拉菜单

    ### JSP+JavaScript 实现二级级联下拉菜单的知识点解析 #### 一、概述 在Web开发领域,实现动态的交互式用户界面是提升用户体验的重要手段之一。本文档将详细解析如何通过JSP(JavaServer Pages)与JavaScript来...

    jsp出生日期三级级联下拉列表

    在本文中,我们将深入探讨如何在JSP(JavaServer Pages)中实现一个基于JavaScript的出生日期三级级联下拉列表。这种功能常用于用户注册、个人信息填写等场景,让用户能够方便地选择他们的出生年、月和日。 首先,...

    省市县三级级联select

    在IT行业中,"省市县三级级联select"是一种常见的前端交互设计,主要应用于地理信息的选择,比如用户在填写地址时需要依次选择省、市、县(区)。这种设计能够简化用户操作,提高用户体验,同时也方便后台处理数据。...

    jsp+db的js级联菜单

    级联菜单的数据源通常来自数据库的某个表或者多个关联表,表中的字段代表菜单的层级和选项,通过查询语句(如SQL的SELECT语句)从数据库中检索出数据,然后由JSP将这些数据转换成菜单结构。 在压缩包中的两个文件...

    实现jsp页面二级下拉框联动,实时读取数据库数据

    本文将详细介绍如何使用JSP(JavaServer Pages)技术来实现这样的功能,并实时从数据库中获取数据。 首先,我们需要理解JSP的基本原理。JSP是一种动态网页技术,它允许我们将Java代码嵌入到HTML或XML文档中,以处理...

    jsp dwr级联效果代码

    首先,我们看jsp页面中的代码: ```html &lt;script src="dwr/interface/JUserChec.js"&gt;&lt;/script&gt; &lt;script src="dwr/engine.js"&gt;&lt;/script&gt; &lt;script src="dwr/util.js"&gt;&lt;/script&gt; ``` 这里引入了DWR的核心文件,包括...

    jsp+json+mySql 实现二级级联下拉菜单

    在本文中,我们将深入探讨如何使用JSP、JSON和MySQL来实现一个二级级联下拉菜单。这个功能常用于网站的表单设计中,让用户能够从相关联的分类中选择选项,例如省份与城市的选择。 首先,让我们了解这三个技术的核心...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    JSP+AJAX三级级联及更多级的实现

    ### JSP+AJAX三级级联及更多级的实现 #### 概述 在Web开发中,级联选择框是一种常见的交互方式,尤其在需要多级数据关联展示时(如省份-城市-区县的选择)。本文将详细介绍如何利用Java Server Pages (JSP) 和 ...

    jsp+ajax实现三级级联

    ### jsp+ajax实现三级级联 在现代Web开发中,动态加载数据并根据用户的选择进行更新是非常常见的需求。例如,在电商网站上选择省份、城市和区县时,后两个选项会根据前一个选项的选择而变化。这种效果可以通过多种...

    struts2 级联菜单

    5. **JSP页面**:创建JSP页面,使用Struts2的&lt;s:select&gt;标签来创建级联的下拉框。通过设置`list`属性,`listKey`和`listValue`来绑定Action返回的数据。利用JavaScript或jQuery监听第一个下拉框的`onChange`事件,当...

    jquery+ajax+jsp+servlet实现二级级联菜单

    ### 使用jQuery、Ajax、JSP与Servlet实现二级级联菜单 #### 一、项目背景与技术栈概述 本文档将详细介绍如何使用jQuery、Ajax、JSP与Servlet来实现一个简单的二级级联菜单功能。该功能常见于许多Web应用程序中,如...

    ajax,jsp,servlet无刷新实现级联效果。

    "ajax,jsp,servlet无刷新实现级联效果"是一个常见的应用场景,主要涉及的技术包括Ajax(异步JavaScript和XML)、Java Servlet以及JSP(JavaServer Pages)。在这个场景中,我们将探讨如何通过这些技术实现在网页上...

    js 使用form表单select类实现级联菜单效果

    在级联菜单的设计中,至少会使用两个select元素,分别记为select1和select2。select1是第一个下拉列表,用户的选择会触发与之关联的JavaScript函数,这个函数根据用户在select1中的选择动态更新***2的内容。 接下来...

Global site tag (gtag.js) - Google Analytics