从 sql server 数据库自动填充 jsp 中文本字段的值答案

【问题标题】：auto populate values for text fields in jsp from sql server database从 sql server 数据库自动填充 jsp 中文本字段的值
【发布时间】：2016-08-03 03:23:40
【问题描述】：

我在 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 作为下拉值。当我在下拉列表中选择会员名时，文本字段会员 ID、会员地址、会员城市、开放日期和关闭日期需要根据从下拉列表中选择的会员名填充相应的值。

我已经在我的 jsp 中使用 JSTL 将 db 中的成员名显示到下拉列表中。像这样：

<%@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 中获取自动填充的文本字段值以进行进一步处理。请帮帮我。

【问题讨论】：

最简单的方法是 IHMO 使用 HTML data attributes，即向每个 option 添加一些数据属性（例如 data-member-id、data-member-address 等）并在 @987654330 中使用它们@'s onchange 处理程序。
@Jozef：可以说，我在每个循环的选项标记内添加了两个数据属性：我将添加一个 js 脚本文件，我将在其中为 select 标签编写一个 onchange 函数：在此函数中如何为文本文件设置值？我的意思是如何获取所选选项的数据属性？感谢您的回复。
然后使用this code处理你的select的change事件并获取选中的选项，然后使用.data(key)jQuery函数获取data属性的值。然后使用 Jquery .val(value) 函数设置文本字段的值（您需要正确命名它们，而不是全部使用相同的名称；更好的是 - 为它们分配一个唯一的 id）。
当我在选择标签中有静态选项时，数据属性起作用。但是我正在从数据库的下拉列表中创建选项，因此无法为每个循环 jstl 标记分配数据属性。 :(
今晚心情不错，我写了一个答案，将提示总结为更具指导性的内容。特别注意SQL命令从SELECT MemberName ...到SELECT * ...的变化。

标签： javascript jquery sql-server jsp jstl

【解决方案1】：

尝试以下方法（我刚刚总结了我的 cmets 的提示）：

...
<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>
...

【讨论】：

宾果游戏！这就像魅力！非常感谢约瑟夫！