MVC中View部分两个Select的关联

Just_Simple 2008-11-11 05:43:22
想在JSP页面中实现的效果： 所在部门（一个select），比如子项有：市场部，外交部，研发部；
所任职位（同上），该select的子项是基于 所在部门 变化的。
请问这样的效果可以通过什么方式实现。

这样的select 关联 用脚本实现不了，用Servlet没思路。求救……

...全文
325 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
Just_Simple 2008-11-12
  • 打赏
  • 举报
 回复
[Quote=引用 17 楼 sunhualong5560 的回复:]
我也有个例子分享下.
1.js部分:

JScript code
//定义XMLHttpRequest对象实例
var http_request = false;
/**
* 定义可复用的http请求发送函数
* method : GET 或 POST
* url : action 或 servlet
* content : request 参数组合
* responseType : text 或 xml
* callback : response返回时调用的函数
**/
function send_request(method,url,content,responseType,callback) {
http_request = false…
[/Quote]

谢谢 分享，感觉比较规范。 呵呵
Just_Simple 2008-11-12
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 mengxin123 的回复:]

我前段时间刚做的，楼主可以参考一下：

分公司字段（fgs）是从数据库取出来的，用电地点（yddd）也是从数据库中取出，随着分公司的变化而变化。
fgs表有字段Id，name。
dfbzb1表有字段Id，yddd，fgs等。

以下是代码：

Java code<script language = "JavaScript">
type2s=new Object();
<%
Connection con=OpenDB.getConnection();

String str1="select * from …
[/Quote]
呵呵，谢谢！
mengxin123 2008-11-12
  • 打赏
  • 举报
 回复
我的表设计得有点乱，但是上面的代码是正确的，这个系统正在用着。
mengxin123 2008-11-12
  • 打赏
  • 举报
 回复

我前段时间刚做的，楼主可以参考一下：

分公司字段（fgs）是从数据库取出来的，用电地点（yddd）也是从数据库中取出，随着分公司的变化而变化。
fgs表有字段Id，name。
dfbzb1表有字段Id，yddd，fgs等。

以下是代码：
<script language = "JavaScript">

type2s=new Object();

<%

			Connection con=OpenDB.getConnection();

				

			String str1="select * from fgs";//先从fgs表中取分公司名称。

			ResultSet rs1=ExecuteWay.exeSqlQuery(str1);

			while(rs1.next()){

				String str2="select distinct yddd from dfbzb1 where fgs='"+rs1.getString("name")+"' order by yddd";//从dfbzb1中取用电地点，rs1.getString("name")是从fgs表取得的分公司字段名。

				Statement stmt = con.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY); 

			    ResultSet rs2=stmt.executeQuery(str2);

   

				if(rs2.next()){

				rs2.last();

				int rowcount=rs2.getRow();

				String sz="type2s['"+rs1.getString("name")+"']=new Array(";

 for(int k=1;k<=rowcount;k++){

     rs2.absolute(k);

  if(k<rowcount){

  sz+="'"+rs2.getString("yddd")+"',";

  }else {

  sz+="'"+rs2.getString("yddd")+"');";

  }

   }

   out.println(sz);

 }

   }

%> 

function choosetype2(x,y){

var t1;

var t2;

var i,ii;

t1=x.value;

t2=y.value;

y.length=1;

if(t1=='0') return;

if(typeof(type2s[t1])=='undefined') return;

  for(i=0; i<type2s[t1].length; i++)

  {

     ii = i+1;

     y.options[ii] = new Option();

     y.options[ii].text = type2s[t1][i];

     y.options[ii].value = type2s[t1][i];

  }



} 

</script>







<TR> 

    

    	<td width="20%" align="right">分 公 司:</td>

    	<td width="20%" align=right vAlign="center">

        <select style="WIDTH: 150px" id="fgs" name="fgs" onChange="choosetype2(this,document.getElementById('yddd'))"> //onChange事件。

        <option value="" selected></option>

       <%

			Connection con=OpenDB.getConnection();

			String str="select * from fgs";//从fgs表中取分公司名称。

			ResultSet rs=ExecuteWay.exeSqlQuery(str);

			while(rs.next()){

			out.println("<option value='"+rs.getString("name")+"'>"+ rs.getString("name")+"</option>");

}

			rs.close();

%>

      

        </select>        </td>

    

 <tr>

        <td width="20%" align=right vAlign="center">用电地点: </td>

        <td width="20%" align=right vAlign="center">

         <!--

        <Input type="text" id=yddd name="yddd"  width="150px">        

        -->

        <select name="yddd" id="yddd" style="WIDTH: 150px">

        <option value=""></option>

        </select>

		</td>

     </tr>
sunhualong5560 2008-11-12
  • 打赏
  • 举报
 回复
我也有个例子分享下.
1.js部分:


//定义XMLHttpRequest对象实例

var http_request = false;

/**

 * 定义可复用的http请求发送函数

 * method : GET 或 POST

 * url : action 或 servlet

 * content : request 参数组合 

 * responseType : text 或 xml

 * callback : response返回时调用的函数

 **/

function send_request(method,url,content,responseType,callback) {

	http_request = false;

	//开始初始化XMLHttpRequest对象

	if(window.XMLHttpRequest) { //Mozilla 浏览器

		http_request = new XMLHttpRequest();

		if (http_request.overrideMimeType) {//设置MiME类别

			http_request.overrideMimeType("text/xml");

		}

	}

	else if (window.ActiveXObject) { // IE浏览器

		try {

			http_request = new ActiveXObject("Microsoft.XMLHTTP");

		} catch (e) {

			try {

				http_request = new ActiveXObject("Msxml2.XMLHTTP");

			} catch (e) {}

		}

	}

	if (!http_request) { // 异常，创建对象实例失败

		window.alert("不能创建XMLHttpRequest对象实例.");

		return false;

	}

	if(responseType.toLowerCase()=="text") {

		//http_request.onreadystatechange = processTextResponse;

		http_request.onreadystatechange = callback;

	}

	else if(responseType.toLowerCase()=="xml") {

		//http_request.onreadystatechange = processXMLResponse;

		http_request.onreadystatechange = callback;

	}

	else {

		window.alert("响应类别参数错误。");

		return false;

	}

	// 确定发送请求的方式和URL以及是否异步执行下段代码

	if(method.toLowerCase()=="get") {

		http_request.open(method, url, true);

	}

	else if(method.toLowerCase()=="post") {

		http_request.open(method, url, true);

		http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

	}

	else {

		window.alert("http请求类别参数错误。");

		return false;

	}

	http_request.send(content);

}

// 处理返回文本格式信息的函数

function processTextResponse() {

	if (http_request.readyState == 4) { // 判断对象状态

		if (http_request.status == 200) { // 信息已经成功返回，开始处理信息

			//alert(http_request.responseText);

			alert("Text文档响应。");

		} else { //页面不正常

			alert("您所请求的页面有异常。");

		}

	}

}

//处理返回的XML格式文档的函数

function processXMLResponse() {

	if (http_request.readyState == 4) { // 判断对象状态

		if (http_request.status == 200) { // 信息已经成功返回，开始处理信息

			alert(http_request.responseXML);

			//alert("XML文档响应。");

		} else { //页面不正常

			alert("您所请求的页面有异常。");

		}

	}

}


2.jsp部分:


<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>My JSP 'index.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">    

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<script type="text/javascript" src="js/ajaxBase.js"></script>

	<script type="text/javascript">

		function $(objId){

			return document.getElementById(objId);

		}

		//清除所有

		function clearAll(objId){

			for(var z=$(objId).options.length-1;z>-1;z--) 

		    { 

		        $(objId).options.remove(z); 

		    }

		    

		    $(objId).add(new Option("请选择","0"));

		}

		

		//请求此省份下的城市

		function showCity(obj){

			clearAll("city");

			

			if(obj.value!=0){

				send_request("post","showList","province="+obj.value,"xml",returnList);

			}

		}

		

		//返回结果，加载到第二个select上

		function returnList(){

			if (http_request.readyState == 4) { // 判断对象状态

				if (http_request.status == 200) { // 信息已经成功返回，开始处理信息

					var doc=http_request.responseXML;

					var citys=doc.getElementsByTagName("city");

					

					for(var i=0;i<citys.length;i++){

						$("city").add(new Option(unescape(citys[i].getAttribute("city_name")),citys[i].getAttribute("city_id")))

					}

					

				} else { //页面不正常

					alert("您所请求的页面有异常。"+http_request.status);

				}

			}

		}

	</script>

  </head>

  

  <body>

    省:

    <select id="province" onchange="showCity(this)">

    	<option value="0" >请选择</option>

    	<option value="1" >北京</option>

    	<option value="2" >上海</option>

    	<option value="3" >江西</option>

    	<option value="4" >湖北</option>

    	<option value="5" >湖南</option>

    </select>

    <br/>

    市区:

    <select id="city" >

    	<option value="0" >请选择</option>

    </select>

  </body>

</html>
chaorenwopashei 2008-11-12
  • 打赏
  • 举报
 回复
可以用Ajxa技术实现2级级联，多级级联也是很esay实现的，先学习dwr框架再来做
Just_Simple 2008-11-12
  • 打赏
  • 举报
 回复
[Quote=引用 11 楼 yinyuan1987 的回复:]
js可以啊！网上很多这例子啊！给楼主g一个：

先来说一个比较简单实现方法吧。这是我以前做的，是院系和下属科室的联动，与你的情况基本一致辞。适用于少量数据,你先看懂这个静态页面。
<script language="javascript">
function changeChildItem()
{
document.all.ksh.length=0;
var selectContent = document.createElement("option");
…
[/Quote]
呵呵 ，谢谢！
Landor2004 2008-11-11
  • 打赏
  • 举报
 回复
如果是struts2的话，里面有个doubleselect标签
ajax的用jquery来实现，很简单，几行代码
抬头望远，低头沉思 2008-11-11
  • 打赏
  • 举报
 回复
js可以啊！网上很多这例子啊！给楼主g一个：

先来说一个比较简单实现方法吧。这是我以前做的，是院系和下属科室的联动，与你的情况基本一致辞。适用于少量数据,你先看懂这个静态页面。
<script language="javascript">
function changeChildItem()
{
document.all.ksh.length=0;
var selectContent = document.createElement("option");
selectContent.text = '请选择';
selectContent.value = '';
document.all.ksh.add(selectContent);
var SelectValue=document.forms[0].yxsh.value;

var sub ='XXXY';
if (sub == SelectValue)
{
var content = document.createElement("option");
content.text = '基础软件教研室';
content.value = '1';
document.all.ksh.add(content);


}

var sub ='JXXY';
if (sub == SelectValue)
{
var content = document.createElement("option");
content.text = '机械学院办公室';
content.value = '2';
document.all.ksh.add(content);


}
}
</script>
<form>
<select name="yxsh" id="yxsh" onchange="changeChildItem();" >
<option value="">请选择</option><option value="XXXY">信息学院</option>
<option value="JXXY">机械学院</option>
</select>
<br>
<select name="ksh" id="ksh">
<option value="">请选择</option>
</select>
</form>


也就是说如果这个静态页面中的JS部分的数据是用数据库里查出来的就可以实现了。
下面来说JSP的实现。以上面的信息为例
用SQL查出如下信息。用科室信息表中查出如下信息
所属院系编号，科室名称，科室编号。放到一个ArrayList里。
然后在页上输出JS的地方写上这样的程序;
<%ArrayList allZyList = (ArrayList) request.getAttribute("ksxx");%>
<script language="javascript">

function changeChildItem()
{
document.all.ksh.length=0;
var selectContent = document.createElement("option");
selectContent.text = '请选择';
selectContent.value = '';
document.all.ksh.add(selectContent);
var SelectValue=document.forms[0].yxsh.value;
<%for(int i=0;i<allZyList.size();i++)
{
String ksToYs[]=(String[])allZyList.get(i);
%>
var sub ='<%=ksToYs[0]%>';
if (sub == SelectValue)
{
var content = document.createElement("option");
content.text = '<%=ksToYs[2]%>';
content.value = '<%=ksToYs[1]%>';
document.all.ksh.add(content);
}
<%}%>
}
</script>
就可以了
zhzhzhhh 2008-11-11
  • 打赏
  • 举报
 回复
这个貌似现成例子有很多哟，呵呵
wang_2000 2008-11-11
  • 打赏
  • 举报
 回复
js ，下拉联动。。
beacon0037 2008-11-11
  • 打赏
  • 举报
 回复
问题未描述清楚，假如你是要实现一个员工添加，在选择其所在部门时，将这个部门的所有职位动态显示在一个select里得话，

你可以给所在部门的select添加一个onchange()事件，将value传给服务器(异步回调)，然后服务端servlet根据接收的数据从数据库读出对应得职位集合返回给客户端，再动态创建一个所有职位的select将数据填充到里面去
ma_liang 2008-11-11
  • 打赏
  • 举报
 回复
你的意思是这样的吧：要实现级联选择，就是一个select选好了，然后另一个select自动选好
用js可以实现的。
火箭超人 2008-11-11
  • 打赏
  • 举报
 回复
用js可以，不过ajax实现起来更方便。
Just_Simple 2008-11-11
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 link_1029 的回复:]
用js啊,实现级联不是很难的
[/Quote]
js 所任职位 要怎么通过所在部门变？ onchange， 数据还需从数据库获取啊 实现还是有些问题
link_1029 2008-11-11
  • 打赏
  • 举报
 回复
用js啊,实现级联不是很难的
shuai45 2008-11-11
  • 打赏
  • 举报
 回复
呵呵，有点明白了。
你这样，所在部门可以用select也可以用其他方式，
当选择所在部门的时候，给予一个弹出层div，这个div中有职位。。。。姓名，，，，等等。
方法很多
HellMoxi 2008-11-11
  • 打赏
  • 举报
 回复
我没读懂题目。帮顶一下先！
ASP.NET MVC中的View
 MVC中View是专门用来向浏览器显示结果的，它只负责把传入到View的数据展现给用户； 一，自定义view引擎：实现IViewEngine接口 namespaceSystem.Web.Mvc { publicinterface IViewEngine { ViewEngineResultFindView(ControllerContext controllerCo
MVC里面两个dropdownlist联动
MVC view里面有两个dropdownlist分别邦定到两个属性 View里面 @Html.LabelFor(m => m.Name, new { @class = "form-label" }) @Html.DropDownListFor(m => m.Id, (IEnumerable)ViewData[
【 MVC 】显示数据库数据表格
之前看。net之美很多地方都看不明白，但是今天重新看了一下，觉得很有感悟。 我演示了在一个HTML表格中格式化一系列数据库记录的两个方法。首先，我演示了如何直接在视图中格式化数据库记录。接下来，我示范了如何在格式化数据库记录时利用部分类。 1.1创建模型类 我们将要显示Movies数据库表中的一系列记录。Movies数据库表包含下面的列： Column Name Data T
MVC, MVP, MVVM比较以及区别
MVC优点由于MVC很好的分离了视图层和业务层，所以它具有以下优点耦合性低开发速度快可维护性高没有控件的概念，对html没有封装，易于理解和其它平台(java, php)等更加相似。便于人才获取MVC使用的误区1.把Model理解成实体类（Entity），在MVC中Model应该包含2部分功能，一部分是处理业务逻辑，一部分是提供View显示的数据2.把业务逻辑全部放在Controller端这两个误区本质上都是对Model的作用不明导致的。...
.net中MVC的创建详解
传统的MVC概念 模型：组类，描述了要处理的数据以及修改和操作数据的业务规则 视图：定义应用程序用户界面的显示方式 控制器：一组类，用来处理来自用户，整个应用程序流以及特定应用程序逻辑的通信 MVC在web框架中的应用 模型：模型是描述程序设计人员感兴趣问题域的一些类，这些类通常封装存储在数据库中的数据，以及操作这些数据和执行特定域业务逻辑的代码。在ASP.NET MVC中，模型就像是一
Web 开发

81,092

社区成员

341,716

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章