我在SQL Server中有一个名为Members的表,如下所示:
MemberId MemberName MemberAddress City Pin OpeningDate ClosingDate InstallmentAmount Status
100 Abilash Hebbal Mysore 570023 21-07-2016 22-07-2016 200 Active
102 rohit Hootagalli Mysore 570018 02-08-2016 18-08-2016 200 Active
我有一个下拉框,它从sql db中获取MemberName作为下拉值。当我在下拉列表中选择一个MemberName时,文本字段Member ID,Member Address,Member City,开放日期和结束日期需要根据从下拉列表中选择的Membername填充相应的值。
我已经在我的jsp中使用JSTL将数据库中的成员名显示到下拉列表中了。像这样:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<form name="AddCollection" action="AddCollection" method="get">
<sql:setDataSource var="pigmy" driver="com.microsoft.sqlserver.jdbc.SQLServerDriver"
url="jdbc:sqlserver://localhost:9900;DatabaseName=pigmy"
user="pigmy" password="pigmy"/>
<sql:query dataSource="${pigmy}" var="result">
SELECT MemberName from Members where Status='Active';
</sql:query>
Member:<select id="ClientDropdown" name="ClientDropdown" width="300" style="width: 300px">
<c:forEach var="row" items="${result.rows}">
<option><c:out value="${row.MemberName}"/></option>
</c:forEach>
</select><br/><br/>
Member ID: <input type="text" name="MemberID" size="10"/><br/><br/>
Member Address: <input type="text" name="MemberID" size="10" /><br/><br/>
Member City: <input type="text" name="MemberID" size="10" /><br/><br/>
Opening Date: <input type="text" name="MemberID" size="10" /><br/><br/>
Closing Date: <input type="text" name="MemberID" size="10" /><br/><br/>
Amount Collected: <input type="text" name="AmountCollected" value="0" size="40" /><br/><br/>
Amount Collected on: <input type="date" name="CollectedDate" value="0" size="40" /><br/><br/>
Collected for the Month: <input type="month" name="CollectedForMonth" value="0" size="40" /><br/><br/>
<input type="submit" value="Submit" name="Submit" />
</form>
</body>
</html>
请指导我现在如何进行。我知道一些javascript,jquery和jstl以及servlet。我将在servlet中获取自动填充的文本字段值,以进行进一步处理。请帮我。
最佳答案
尝试类似以下的操作(我刚刚总结了我的评论中的提示):
...
<sql:query dataSource="${pigmy}" var="result">
SELECT * FROM Members WHERE Status='Active'
</sql:query>
Member:
<select id="ClientDropdown" name="ClientDropdown" width="300" style="width: 300px">
<c:forEach var="row" items="${result.rows}">
<option data-member-id="${row.MemberId}" data-member-address="${row.MemberAddress}" data-member-city="${row.MemberCity}" ... ><c:out value="${row.MemberName}"/></option>
</c:forEach>
</select>
<br/><br/>
Member ID: <input type="text" name="MemberID" size="10"/><br/><br/>
Member Address: <input type="text" name="MemberAddress" size="10" /><br/><br/>
Member City: <input type="text" name="MemberCity" size="10" /><br/><br/>
...
<script>
$(document).ready(function(){
$('#ClientDropdown').on('change', function(event){
var optionSelected = $("option:selected", this);
var mID = $(optionSelected).data('memberId'); // note the data-member-id --> memberId change
var mAddr = $(optionSelected).data('memberAddress');
var mCity = $(optionSelected).data('memberCity');
// ... read more data attributes
$('input[name="MemberId"]').val(mID);
$('input[name="MemberAddress"]').val(mAddr);
$('input[name="MemberCity"]').val(mCity);
// ... set more input field values
});
});
</script>
...