select from a dropdown list based on selection from another dropdown list in jsp
I have two dropdown, one with all account ids and one with corresponding email ids. if I select one开发者_开发知识库 entry from account id, corresponding email-id should be selected automatically in the other dropdown. (account id and email-ids are one to one relation ship. first accound id corresponds to first email id etc.) how can we do that in JSP ?
see my dropdowns here:
<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>
email-ids are here:
<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>
There are a lot of ways to do that. The basic idea is using javascript (or jQuery or any other AJAX framework) to change the form's action to "comboUpdate" or something and submit that form. The action will only load the second combo and forward to the same page.
Hi use Ajax for retrieving values from database using select box, this might help you
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);
}
%>
加载中,请稍侯......
精彩评论