JSP - Javascript,基于select选项值更新表字段

时间:2017-07-13 13:31:33

标签: javascript java html jsp

我在互联网上搜索了2天,但我无法找到解决问题的具体方法。

由于我是新手,我无法弄清楚如何做到这一点;

我有一个包含2列的数据库表。材料代码和说明。

在我的JSP页面上,我有一张桌子。第一列是选择选项,其中包含数据库中的材料代码。

根据此选择,匹配的描述必须出现在第二列中。这是我无法做到的部分。这是代码。

 </head>
    <body>
        <%
            Class.forName("com.mysql.jdbc.Driver").newInstance();
            String url = "jdbc:mysql://localhost:3306/instock";
            String dbusername = "root";
            String dbpassword = "pswd";
            Connection con = DriverManager.getConnection(url, dbusername, dbpassword);
            ResultSet rs = null;

            PreparedStatement ps = con.prepareStatement("select * from master_materials");

        %>    

        <input type="submit" value="Save" />

        <table id="myTable" border="1">   
            <th>Material</th>
            <th>Desciption</th>
            <th>Quantity</th>

            <%for (int row = 1; row <= 5; row++) { %>
            <tr id="rowToClone">                
                <%--   <%for (int col=1; col <= 5; col++) { %>    --%>
                <%rs = ps.executeQuery();%>
                <td> 
                    <select>
                        <% while (rs.next()) {%>
                        <option><%=rs.getString(1)%></option>
                        <%}%>    
                    </select>

                </td>
                <td><input type="text" name="Description" value="" readonly="readonly" />  </td> 
                <td>adsasd </td> 
                    <%--       <% } %> --%>
            </tr>
            <% }%>
        </table>

    </body>
    <input type="button" onclick="cloneRow()" value="Clone Row" />
</html>

<script type="text/javascript">
    function cloneRow() {
        var row = document.getElementById("rowToClone"); // find row to copy
        var table = document.getElementById("myTable"); // find table to append to
        var clone = row.cloneNode(true); // copy children too
        clone.id = "newID"; // change id or other attributes/contents
        table.appendChild(clone); // add new row to end of table
    }
</script>

2 个答案:

答案 0 :(得分:0)

首先,在jsp上编写java代码并不好。填充选择时,可以选择将值包括为描述。您可以使用javascript Onchange函数来捕获选择的交互。

<select onchange="yourFunction()">
<option value= "<%=rs.getString(2)%></"><%=rs.getString(1)%></option>

现在在yourFunction上,您可以获取所选项目及其说明,然后您可以在第二列设置此值。

答案 1 :(得分:0)

我知道这不是答案,但我无法发表评论,所以请理解。

我相信这会回答您的问题,值得查看Populating cascading dropdown lists in JSP/Servlet

接受的答案非常详细和有用。