简体   繁体   English

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

[英]JSP - Javascript, Update table fields based on select option value

I have been searching the internet for 2 days but I couldn't find any specific solution to my problem. 我已经在互联网上搜索了2天,但找不到针对我的问题的任何特定解决方案。

As I am a newbie I couldn't figure out how to do this; 由于我是新手,所以我不知道该怎么做。

I have a database table with 2 column. 我有2列的数据库表。 Material Code and Description. 材料代码和说明。

On my JSP page, I have a table. 在我的JSP页面上,我有一张桌子。 A first column is a select option with material codes from the database. 第一列是带有来自数据库的物料代码的选择选项。

Based on this selection the matching description must appear in the second column. 基于此选择,匹配的描述必须出现在第二栏中。 This is the part I couldn't manage to do.Here is the code. 这是我无法完成的部分,这是代码。

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

At first, writing java code on jsp is not good. 起初,在jsp上编写Java代码并不好。 When you populate your select, you can choose to include value as description. 当您填充选择时,可以选择包括值作为描述。 You can use javascript Onchange function to catch select interaction. 您可以使用javascript Onchange函数来捕获选定的交互。

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

Now on yourFunction you can get the item that was selected and its description and you can set this value on second column. 现在yourFunction ,你可以得到被选中的项目和它的描述,你可以设置在第二列此值。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM