如何在从下拉列表中选择项目名称时将项目 ID 自动显示到文本框中答案

【问题标题】：How to automatically display project id into textbox on selection of project name from drop down如何在从下拉列表中选择项目名称时将项目 ID 自动显示到文本框中
【发布时间】：2018-07-19 22:51:31
【问题描述】：

我想从数据库中获取项目名称到下拉框中。以下是将项目名称提取到下拉框中的代码。

    <TD><SELECT name="ProjName" id="selectBox"  style="fontfamily:Calibri;width:200px">
                <%
    try{
        String ID = "";
        String ProjName="";
        Connection con = null;
        response.setContentType("text/html");
    con = DBConnection.createConnection();
//Class.forName("com.mysql.jdbc.Driver").newInstance();
//Connection connection = DriverManager.getConnection("jdbc:mysql://localhost/customers?user=root&password=root");
        Statement statement = con.createStatement() ;
        resultset =statement.executeQuery("SELECT ProjName,ID FROM myproject;") ;
%>
                  <%  while(resultset.next()){ %>

            <option><%= resultset.getString(1)%></option>

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

Now I want to display respective Project Id into textbox.For example when I select projectname1 from dropdown then automatically set projectId1 into textbox.

我不知道如何在选择下拉值时自动将相应的项目 ID 设置到文本框中。

【问题讨论】：

标签： javascript mysql jsp

【解决方案1】：

我不懂 Java，但关于你的 jquery 代码的问题，那么 sn-p 可能真的有助于解决你的问题。

//下面的java代码不是猜的但是我已经尝试用在线java代码编辑器解决了

<%@ page import="java.util.*,java.sql.*,javax.sql.*" %>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <select name="ProjName" id="selectBox" style="font-family:Calibri;width:200px">
                        <%
                        try{
                            String ID = "";
                            String ProjName="";
                            Connection con = null;
                            response.setContentType("text/html");
                            con = DBConnection.createConnection();
                            Statement statement = con.createStatement() ;
                            ResultSet res = statement.executeQuery("SELECT ProjName,ID FROM myproject;");
                            while(res.next()){ %>
                            <option <%=res.getString(2)%>>
                                <%= res.getString(1)%>
                            </option>
                            <%
                            }
                        }catch(Exception e){
                            out.println("wrong entry"+e);
                        }
                        %>
                    </select>
                </td>
            </tr>
        </table>
    </body>
</html>

$(document).ready(function(e) {
  $(".ddProject").on("change", function() {
    if ("" !== $(this).val()) {
      $(".txtSelected").val($(this).val());
    }
  });
});

* {
  font-family: 'arial';
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br/>
<select name='ddProject' class="ddProject">
      <option value="">Choose project</option>
      <option value="1">Project 1</option>
      <option value="2">Project 2</option>
      <option value="3">Project 3</option>
    </select>
<br/><br/>
<input type="text" name="txtSelected" id="txtSelected" class="txtSelected" placeholder="project id?" />

【讨论】：

感谢您的解决方案，但是这些是静态的，我需要动态的。我想从数据库中获取项目名称和项目 ID。
@JYOTIMISHRA 首先你的意思是说你想创建第一个绘制下拉菜单，然后你想像那样工作。但您的问题是“我可以在选择下拉值时自动将相应的项目 ID 设置到文本框中。”
@JYOTIMISHRA 您现在可以在我的回答中检查 java 代码吗？
@JYOTIMISHRA 实际上有一些错字和声明错误。

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<p>
Now I want to display respective Project Id into textbox.For example when I select projectname1 from dropdown then automatically set projectId1 into textbox.
</p>

<select name="ProjName" id="selectBox"  style="fontfamily:Calibri;width:200px">
<option value="">-- select project --</option>
<option myid="1001">Procject 1</option>
<option myid="1002">Procject 2</option>
<option myid="1003">Procject 3</option>
<option myid="1004">Procject 4</option>
</select>

<input id="selectedProj" type="text">
<script>
window.onload = function(e) {
  document.getElementById('selectBox').onchange = function (e) {
      var selectedOption = this[this.selectedIndex];
      var selectedId = selectedOption.getAttribute('myId');
      document.getElementById("selectedProj").value = selectedId
  }
}
</script>
</body>
</html>

【讨论】：