Question

我有两个下拉列表，一个包含所有帐户ID，另一个包含相应的电子邮件ID。如果我从帐户ID中选择一个条目，则应在另一个下拉列表中自动选择相应的email-id。（帐户ID和电子邮件ID是一对一的关系。第一个accound id对应于第一个电子邮件ID等）我们如何在JSP中执行此操作？

在这里查看我的下拉菜单：

<td>
 1. Member Account Number
     <span class="bodyCopy">
      <font color="#ff0000"> * </font>
     </span>: 
    <html:select name="DataForm" 
                 property="Member.accountNumber"  
                 styleClass="formContent" 
             style="width:80px"> 

      <html:options collection="<%= WorkConstants.RENewDropdowns.PACCT %>" 
                        property="value" 
                        labelProperty="label" 
                        styleClass="formContent"/>
    </html:select>
</td>

电子邮件ID在这里：

<td>
 3. Member <br>E-mail Address:<br />
  <span class="bodyCopy"></span> 

  <html:select  name="DataForm" 
                property="Member.emailAddress.emailAddress" 
                style = "width:150px" 
                styleClass="formContent"> 

     <html:options collection="<%= WorkConstants.RENewDropdowns.PEMAIL %>" 
                       property="value" 
                       labelProperty="label" 
                       styleClass="formContent"/>
</html:select>
</td>

Answer 1

有很多方法可以做到这一点。基本思想是使用javascript（或jQuery或任何其他AJAX框架）将表单的操作更改为“comboUpdate”或其他内容并提交该表单。该操作只会加载第二个组合并转发到同一页面。

Answer 2

您可以使用Ajax使用选择框从数据库中检索值，这可能会对您有所帮助

1.mainpage.jsp

<%@page import="java.sql.*"%>
  <html>
  <head>  
  <script language="javascript" type="text/javascript">  
 //AJAX code for retrieving dates from database
  var xmlHttp;  
  var xmlHttp;
  function showEmp(str){
  if (typeof XMLHttpRequest != "undefined"){
  xmlHttp= new XMLHttpRequest();
  }
  else if (window.ActiveXObject){
  xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (xmlHttp==null){
  alert("Browser does not support XMLHTTP Request");
  return;
  } 
  var url="selEmp.jsp";
  url +="?count=" +str;
  xmlHttp.onreadystatechange = stateChange;
  xmlHttp.open("GET", url, true);
  xmlHttp.send(null);
  }
 function stateChange()
   {   
  if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {   
  document.getElementById("batchdate").innerHTML=xmlHttp.responseText   
   }   
   }

  </script>  
  </head>  
  <body>  
  <select name='batch' onchange="showEmp(this.value)">  
   <option value="none">Select</option>  
  <%
 Class.forName("com.mysql.jdbc.Driver").newInstance();  
 Connection con = DriverManager.getConnection("jdbc:mysql://192.168.40.120:3306/cjet","root","root");  
 Statement stmt = con.createStatement();  
 ResultSet rs = stmt.executeQuery("Select * from cjet.batch");
 while(rs.next()){
 %>
  <option value="<%=rs.getString("bname")%>"><%=rs.getString("bname")%></option>  
  <%
 }
 %>
  </select>  
  <br>  
  <div id='batchdate'>  
  <select name='batchdate' onchange="showCustomer(this.value)">  
  <option value='-1'></option>  
  </select>  
  </div> 
  </body> 
  </html>

<强> 2.retrieve.jsp

<%@page import="java.sql.*"%>
<%
String no=request.getParameter("count");  
String buffer="<select name='batchdate' onchange='showCustomer(this.value)'><option    value='-1'>Select</option>";  
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();  
Connection con = DriverManager.getConnection("jdbc:mysql://192.168.40.144:3306/cjet","root","root");  
Statement stmt = con.createStatement();  
ResultSet rs = stmt.executeQuery("Select * from cjet.batchdate where bname='"+no+"' ");  
while(rs.next()){
buffer=buffer+"<option value='"+rs.getString(1)+"'>"+rs.getString("courseID")+" </option>";  
}                                
buffer=buffer+"</select>";  
response.getWriter().println(buffer); 
}
catch(Exception e)
{
 System.out.println(e);
}
%>

根据jsp中另一个下拉列表中的选择从下拉列表中进行选择

2 个答案: