首页 > 解决方案 > 使用 jsp 代码的带有下拉列表的 HTML 表单

问题描述

我有这个表格用于将数据插入数据库。我想更改从连接到 mysql 数据库的下拉列表中选择的一个值。

这是表格:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html>
<html>
<body>
<div id="container">
    <form onsubmit="return checkempty(form1)" action="Data_insert.jsp" method="post" name="form1">
      <table id="table" width="25%">
        <tr>
          <td><label for="emp_name">Name:  </label></td>
          <td><input type="text" name="emp_name" id="emp_name"></td>
        </tr>
        <tr>
          <td><label for="emp_country">Country: </label></td>
          <td><input type="text" name="emp_country" id="emp_country"></td>
        </tr>
        <tr>
          <td colspan="2" align="center"><input type="submit" name="button" id="button" value="Add"></td>
        </tr>
      </table>
      <p><br>
      </p>
    </form>

 </div>
</body>
</html>

但是为了填补这个国家,我想使用一个 jsp 从 Mysql DB 中获取数据,并带有一个 jsp 代码:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<%@ page import="java.sql.*" %>
<%ResultSet resultset =null;%>

<HTML>

<%
    try{
        Class.forName("com.mysql.jdbc.Driver").newInstance();
        Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/db","root","1234");
        Statement statement = connection.createStatement() ;
        resultset =statement.executeQuery("select country_id, country_name from country") ;
%>

<center>
    <h1> Drop down box or select element</h1>
        <select>
        <option value="0">Select Country</option>
            <%  while(resultset.next()){ %>
                <option value="<%=resultset.getInt("country_id")%>"> <%= resultset.getString("country_name")%></option>
            <% } %>
        </select>
</center>

<%
//**Should I input the codes here?**
        }
        catch(Exception e)
        {
             out.println("wrong entry"+e);
        }
%>

</BODY>
</HTML>

两个代码独立工作。我的问题是如何将 Country 下拉列表集成到表单中。

谢谢 !

标签: htmljspdrop-down-menu

解决方案


您可以通过以下方式实现上述目标:

1)。将您的所有代码放在同一页面中,并使用以下方式为您jquery/js分配值:<select><input..>

//onchange of select this will execute
$("select").on("change", function() {
  //getting value of select-box
  var value = $(this).val();
  //assign value to input with id="emp_country"
  $("#emp_country").val(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!-- put your db connection code here-->

Select-box: 
<select>
  <option value="0">Select Country</option>
  <!--put your option code here-->
  <option value="something">Something</option>

</select>


<!--put catch block here-->

<form onsubmit="return checkempty(form1)" action="Data_insert.jsp" method="post" name="form1">
  <table id="table" width="25%">
    <tr>
      <td><label for="emp_name">Name:  </label></td>
      <td><input type="text" name="emp_name" id="emp_name"></td>
    </tr>
    <tr>
      <td><label for="emp_country">Country: </label></td>
      <td><input type="text" name="emp_country" id="emp_country"></td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input type="submit" name="button" id="button" value="Add"></td>
    </tr>
  </table>
  <p><br>
  </p>
</form>

2) .InCountryDropdown.jsp把你的select-box里面<form></form>有一个提交按钮,如下所示:

<form method="post" action="Yourformpagename">
  <%
   <!--connection code->
%>

    <center>
      <h1> Drop down box or select element</h1>
      <select name="country">
        <option value="0">Select Country</option>
        <%  while(resultset.next()){ %>
          <option value="<%=resultset.getInt(" country_id ")%>">
            <%= resultset.getString("country_name")%>
          </option>
          <% } %>
      </select>
    </center>

    <%
<!--catch block code here-->
%>
      <input type="submit" value="SEND" />
</form>

然后在您的表单页面中获取它,如下所示:

<input type="text" name="emp_country" id="emp_country" value="${param.country}"/>

推荐阅读