jsp中利用bean三级关联下拉菜单问题,下拉列表均从数据库表中取值

我也有同样的问题，我用的是mvc写的代码，可以把值传到servlet在转发回原来的页面
在尝试中

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

最近我刚刚解决了一个类似难题，就拿出来分享一下吧。这个方法的好处是你不用提交当前的JSP页，但能够发送请求去服务器并取得结果，然后根据结果修改你页面上下拉菜单的值。基本的策略是用JavaScript和XmlHttp DOM对象。虽然我个人也是很讨厌用Javascript的，但是在JSP里面，要处理类似的case，至少我想不出更完美的方法了。首先讲一下怎么用xmlHttp对象下面是www.w3cschools.com上的一个例子，教你怎样用JavaScript来发送一个request和接收response<html>
<head>
<script type="text/javascript">
var xmlhttpfunction loadXMLDoc(url)
{
// code for Mozilla, etc.
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest()
  xmlhttp.onreadystatechange=state_Change
  xmlhttp.open("GET",url,true)
  xmlhttp.send(null)
  }
// code for IE
else if (window.ActiveXObject)
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
    if (xmlhttp)
    {
    xmlhttp.onreadystatechange=state_Change
    xmlhttp.open("GET",url,true)
    xmlhttp.send()
    }
  }
}function state_Change()
{
// if xmlhttp shows "loaded"
if (xmlhttp.readyState==4)
  {
  // if "OK"
  if (xmlhttp.status==200)
  {
  alert("XML data OK")
  document.getElementById('A1').innerText=xmlhttp.status
  document.getElementById('A2').innerText=xmlhttp.statusText
  document.getElementById('A3').innerText=xmlhttp.responseText
  }
  else
  {
  alert("Problem retrieving XML data:" + xmlhttp.statusText)
  }
  }
}</script>
</head><body onload="loadXMLDoc('MyServlet')">
<h2>Using the HttpRequest Object</h2><p><b>status:</b>
<span id="A1"></span>
</p><p><b>status text:</b>
<span id="A2"></span>
</p><p><b>response:</b>
<br><span id="A3"></span>
</p></body>
</html>
从这个例子里可以看到，当页面加载的时候，loadDoc被调用，loadDoc会发送一个request去 MyServlet。在这里它用了一个 XMLHttpRequest 的object，高版本的IE和Netscapte应该都支持这个对象，从上面的代码里也可以看出它充分考虑到了IE和别的浏览器。注意这句
xmlhttp.onreadystatechange = xmlhttpChange
这句就是说，一旦xmlHttp对象收到服务器的response之后，就调用 xmlhttpChange函数。如果看懂上面的例子，那我想应该就不难实现楼上想要的功能了。
你先写一个和上面loadDoc()类似函数，这个函数的功能是发送一个request去一个Servlet，或者JSP，这个request中需要包含你第一个下拉菜单所选中的值。这时你的第一个下拉菜单应该是类似这样：
<select name="a" onChange="loadDoc()">然后你在你指定的那个Sevlet或者JSP里面操作数据库并返回第二个下拉菜单所需要的内容。然后你在state_Change()里用javascript把从Servlet返回的结果显示到第二个下拉菜单上。用同样方法做第三个下拉菜单。因为你不用提交整个JSP页，所以当你选了第一个下拉菜单后，用户不会看到整个页面被刷新，而只是第二个下拉菜单北更新。上面的例子用了GET的request,你当然也可以用POST.
如果需要更详细的关于xmlHttp DOM对象的参考，可访问
http://www.w3schools.com/dom/dom_http.asp下面是我用上述方法实现的一个我自己的JSP<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-html-el" prefix="html" %>
<%@ taglib uri="/tags/struts-logic-el" prefix="logic" %>
<%@ taglib uri="/tags/jstl-c" prefix="c" %>
<%@ page import="com.auscript.aat.view.RecordingOrderView" %>
<script type="text/javascript">
var xmlhttpfunction gotoMatter(matterIndex){
document.recordingOrdersForm.nextMatterIndex.value = matterIndex
document.recordingOrdersForm.submit()
}function back(){
gotoMatter(document.recordingOrdersForm.matterIndex.value - 1)
}function loadDoc(){
var url = "getRooms.do?jurisdictionAbbr=" + document.recordingOrdersForm.jurisdictionAbbr.value + "&stateId=" + document.recordingOrdersForm.locationState.value
// code for Mozilla, etc.
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = state_Change
xmlhttp.open("POST", url, true)
xmlhttp.send(null)
   }
// code for IE
else if (window.ActiveXObject){
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
     if (xmlhttp){
     xmlhttp.onreadystatechange = state_Change
     xmlhttp.open("GET",url,true)
     xmlhttp.send()
     }
   }
}function state_Change(){
// if xmlhttp shows "loaded"
if (xmlhttp.readyState == 4){
// if "OK"
if (xmlhttp.status==200){
   var roomId = document.recordingOrdersForm.roomId
roomId.options.length = 0 var responseText = xmlhttp.responseText.split('/////')
var selectedIndex = 0
for(i = 0; i < responseText.length / 2; i++){
roomId.options[i] = new Option(responseText[i * 2], responseText[i * 2 + 1])
}
roomId.options[i - 1] = new Option("Other", "-1")
}else{
alert("Problem retrieving rooms" + xmlhttp.statusText)
}
}
}function addMember(){
  window.open('prepareAddMembers.do?jurisdictionAbbr=' + document.recordingOrdersForm.jurisdictionAbbr.value,'myWindow','height=500,width=500,toolbar=no,menubar=no,resizable=yes,scrollbars=yes')
}
</script><body onload="loadDoc()"><h1>Recording Details -> <c:out value="${recordingOrdersForm.map.matterNames[recordingOrdersForm.map.matterIndex]}" /></h1>
<html:form action="enterRecordingDetail.do">
<html:hidden property="page" value="1"/>
<html:hidden property="hiddenRoomId" />
<html:hidden property="nextMatterIndex" />
<html:hidden property="matterIndex" />
<bean:define id="view" name="UserContainer" property="recordingOrderView" />
<table width="100%" border="0" cellpadding="3">
<tr bgcolor="#CCCCCC">
  <td valign="right">Jurisdiction</td>
  <td><html:text property="jurisdictionAbbr" readonly="true"/></td>
</tr><tr bgcolor="#CCCCCC">
  <td valign="right">Location State</td>
<td>
<c:set var="availableStates"
value="${UserContainer.states[recordingOrdersForm.map.matterIndex]}"/>
<html:select property="locationState" onchange="loadDoc()">
<html:options collection="availableStates" property="stateId"
     labelProperty="stateAbbreviation" />
    <html:option value="-1">Other</html:option>
</html:select>
</td>
</tr><tr bgcolor="#CCCCCC">
<td valign="right">Select Room</td>
<td><html:select property="roomId">
</html:select>
<html:errors property="roomId" />
</td>
</tr><tr bgcolor="#CCCCCC">
  <td valign="right">Select Dates</td>
  <td>
    <html:select property="selectedDates" multiple="true" styleClass="dropdown">
      <html:options name="view" property="dates" />
    </html:select>
    <html:errors property="selectedDates" />
  </td>
</tr><tr bgcolor="#CCCCCC">
  <td valign="right">Special Instructions</td>
  <td>
    <html:select property="specialInstruction">
      <html:option value="-1">None</html:option>
      <html:option value="0">Portable Units</html:option>
      <html:option value="1">Country Circuit</html:option>
      <html:option value="2">Confidentiality</html:option>
      <html:option value="3">Translator</html:option>
      <html:option value="4">Disability</html:option>
      <html:option value="5">ATSI</html:option>
      <html:option value="6">Other</html:option>
    </html:select>
  </td>
</tr><tr bgcolor="#CCCCCC">
  <td valign="right">Comment</td>
  <td><html:textarea property="comment" rows="5" cols="50"/></td>
</tr>
</table><hr>
<c:choose>
<c:when test="${recordingOrdersForm.map.matterIndex == 0}">
   <a href="viewRecordingOrder.do">Previous</a>
</c:when>
<c:otherwise>
   <a href="javascript:back()">Previous</a>
</c:otherwise>
</c:choose>
<input type="Submit" name="Submit" value="Next">
</html:form>
</body>在loadDoc()里，可以看到我的请求是发到一个struts的action getRooms.do去的:var url = "getRooms.do?jurisdictionAbbr=" + document.recordingOrdersForm.jurisdictionAbbr.value + "&stateId=" + document.recordingOrdersForm.locationState.value而且我在?后面加了一些参数。我服务器生成的回复的格式是  value1/////value2/////value3/////
我取到服务器回复以后把这些value放到另一个下拉菜单roomId里面。
谢谢,谢谢
看看还有别的方法没
如果是三级关联的话是不是如果多做两个衔接页面是不是就可以了
谁知道<select>中的怎么能在它选取值的时候让它跳转到另外一个页面
这么着的话,三级关联要刷新两次!
有谁知道select的onchange中如何设置一改变值就跳转到下一个页面并且把所选的值传到下一个页面
下一个页面又如何去得到这个值,我用了一下结果选了没什么反应,等待中^^asdf
回 querlang(编程浪子)
用框架，局部刷新的话我觉得结构会弄得很复杂。我个人认为这是比js更坏的解决办法。我承认我自己一看到javascript也浑身不舒服。回楼主：
可惜楼主看来似乎并不准备采纳我的方法，没关系。也可能我讲得不是很清楚吧，而且我代码比较混乱，应该一看到就晕了不知道你们有没有用过asp.net，asp.net 2.0里的新功能就是可以让一个server control去服务器上面取值，但不提交表单，就是用的类似方法。这样用户就不会看到页面一闪，其实是提交页面后的刷新。只是asp.net全部给你包装好了，JSP里好像没看到类似的包装，其实我可以把上面的东西做成一个taglib的，有时间的话我很想尝试一下。
select的onchange里面应该是放一个javasrcipt函数的
我问了几个朋友，大多实现是用js做的，也有结合xml的，还有用数组实现的，asp中可以不刷新页面，不过jsp他们也不是特别了解，只是知道了道理，我不想把成排的代码放到页面上，可是捣腾了一下也没出来结果，希望大家继续讨论，得到多个方案，好用的的时候选择使用，要是大家有时间可以尝试写一下代码，给我们这些愚人有个实例更可以理解点，谢谢大家了
你找找看这个JS代码DynamicOptionList.js
我今天晚上给你写一个可以运行的例子楼主就知道了，你有没有email?
我也想要一个这样的例子,能不能也给我一份啊   [email protected]
呵呵  谢谢啦!
<script language="javascript">
selectb = new Array();
selectc = new Array();<%
int mm=0;
int nn=0;String Optiona="";
while(selectaRs.next()){
  Optiona+="<option value='"+selectaRs.getString("ID关键字")+"'>"+selectaRs.getString("名称")+"</option>";

  while(selectbRs.next()){
%>
    selectb[<%=mm%>]=new Array("<%=selectaRs.getString("ID关键子")%>","<%=selectbRs.getString("ID关键子")%>","<%=selectbRs.getString("名称")%>");
<%
while(selectcRs.next()){
%>
  selectc[<%=nn%>]=new Array("<%=selectbRs.getString("ID关键子")%>","<%=selectcRs.getString("ID关键子")%>","<%=selectcRs.getString("名称")%>");
<%    nn++;
}    mm++;
  }
%>function GetMenuB(){
  document.form1.selectb.length = 0;
  var keyid = document.form1.selecta.value;
  for (var i=0;i<<%=mm%> ; i++){
    var hh = selectb[i][0];
if (hh == keyid)
  document.form1.selectb.options[document.form1.selectb.length] = new Option(selectb[i][2], selectb[i][1]);
  }
}function GetMenuC(){
  document.form1.selectc.length = 0;
  var keyid = document.form1.selectb.value;
  for (var i=0;i<<%=nn%> ; i++){
    var hh = selectc[i][0];
if (hh == keyid)
  document.form1.selectc.options[document.form1.selectc.length] = new Option(selectc[i][2], selectc[i][1]);
  }
}
</script>
<select name="selecta" onchange="GetMenuB();">
  <%=Optiona%>
</select><select name="selectb" onchange="GetMenuC();">
</select><select name="selectc">
</select>应该是这样就OK的,你试一下!
我做了一个例子，简单易懂，欢迎下载。http://www.zhirenshao.com/java/xmlhttp.war只要把war文件放到你的webapps里面去就可以运行，下载好如果系统自动把文件后缀改成zip，需手动改回成war
NetRep_Loser(网络堕落失败者) 的代码是错误的，因为根本就没有去服务器短取数据
回zhirenshao：这两天出了几天差，我的email：[email protected]
谢谢大家讨论！