相关下拉列表不起作用

Question

在我的一个 JSP 页面中，我想创建动态下拉列表，其中第二个下拉列表取决于第一个下拉列表选择。我能够在数据库的第一个下拉列表中填充数据。但是对于第二个下拉列表它不起作用。我想要根据第一个下拉框的选定数据从数据库中获取第二个下拉列表的数据。我试过下面的代码。

   <% 
        Class.forName("oracle.jdbc.driver.OracleDriver");
        Connection con =DriverManager.getConnection("jdbc:oracle:thin:@//localhost:1521/orcl" ,"hr", "password");

        ArrayList<String> uniList = new ArrayList<String>();
        String query = "select distinct cname from course ";
        Statement stmt = con.createStatement();
        ResultSet rs = stmt.executeQuery(query);
        while (rs.next()) {
           uniList.add(rs.getString("cname"));
        }
          pageContext.setAttribute("authors", uniList);
    %>

      <script language="javascript" type="text/javascript">

     function dropdownlist2(listindex)
     {
     String query2 = "select module from course where cname=?";
     PreparedStatement st2 = con.prepareStatement(query2);
     st2.setString(1,listindex);
     ResultSet rs2=st2.executQuery();
     ArrayList<String> uniList1 = new ArrayList<String>();

     while (rs.next()) {

           uniList1.add(rs2.getString("module"));
        }
     pageContext.setAttribute("authors1", uniList1);
     }
     </script>


        <form name="addteacher" onsubmit="" >
        <center>
       <table width="50%" border="0" align="center" cellpadding="5" cellspacing="5"> 
<tr>
<th align=left>Faculty Name :</th><td align=left><input type=text name=tname size="30" ></td></tr>
        <tr>
        <th align=left>Enter Course :</th><td align=left><select name="Coursebox" onchange="javascript: dropdownlist2(this.options[this.selectedIndex].value);">
                                <option values="">-select-</option>
                                <c:forEach var="cn" items="${authors}">
                                    <option value="${cn}">${cn}</option>
                                </c:forEach></select></td></tr>
        <tr><th align=left>Enter Module:</th>
        <td align=left><select name="dname" size="1">
        <c:forEach var="cn1" items="${authors1}">
         <option value="${cn1}">${cn1}</option>
         </c:forEach>
        </select></td> </tr> </table>  </center>    </form>

谢谢

Answer 1

您需要向您的 servlet 发出 ajax 请求才能获取 第二个下拉列表。

Javascript 部分是：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
 <script language="javascript" type="text/javascript">
 function dropdownlist2(listindex)
 {

$.ajax({ type: "GET",   
     url: "/MyServlet?index="+listindex,   
     success : function(text)
     {
        alert(text);

     }
    });
  }
 </script>

servlet部分是（使用org.json.simple）：

   /**
 * @see HttpServlet#HttpServlet()
 */
public MyServlet() 
{
    super();
    // TODO Auto-generated constructor stub
}

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    // TODO Auto-generated method stub

 request.setCharacterEncoding("utf8");
    response.setCharacterEncoding("utf8");
    response.setContentType("application/json"); 
    PrintWriter out = response.getWriter(); 

/*your code*/
    int listindex = request.getParameter("index");
String query2 = "select module from course where cname=?";
 PreparedStatement st2 = con.prepareStatement(query2);
 st2.setString(1,listindex);
 ResultSet rs2=st2.executQuery();

 JSONArray uniList1 = new JSONArray();
 while (rs.next()) {

       uniList1.add(rs2.getString("module"));
    }


    JSONObject obj = new JSONObject();
    obj.put("authors1", uniList1 );

    out.print(obj);
}

Answer 2

你需要两个 jsps。一个用于填充第一个下拉列表并获取相关值，另一个用于填充第二个下拉列表。这里我给出一些示例代码。因此，根据您的需要进行更改意味着更改connection 设置、添加jstl 库等。您需要调用ajax 来填充第二个下拉列表。

代码中的错误：

1. 您正在脚本标签中编写 java 代码。
2. 填充第二个下拉列表

在第一个jsp（index.jsp）

<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
var keys=document.dummy.sele.value
var urls="fetch.jsp?ok="+keys//to fill second drop down
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function()
  {    
removeall();     
  if (xmlhttp.readyState==4)
    {//is success, then fill second drop down
            z=0;
            var roott=xmlhttp.responseXML.documentElement;
            var ress=roott.getElementsByTagName("empname")[z].childNodes[0].nodeValue;

            while(ress!=null)
            {
                    addoptions(ress)
                    z++
             var ress=roott.getElementsByTagName("empname")[z].childNodes[0].nodeValue;
            }
    }

    function removeall()
    {

        var ct=document.dummy.sele2.length;
        for(i=ct; i>=0; i--)    {    
            document.dummy.sele2.options[i]=null;
             }
    }

    function addoptions(reslt)
    {

        var ct1=document.createElement("OPTION");
        ct1.text=reslt;
        ct1.value=reslt;
        document.dummy.sele2.options.add(ct1);

    }
}    

xmlhttp.open("GET",urls,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form name="dummy">
<font face="verdana" size="2">
<!-- your first drop down with java and jstl code should be here -->
Employee Number:    <select name="sele" onchange="loadXMLDoc()">
            <option>select</option>
            <option value="100">100</option>
            <option value="101">101</option>
    </select>
 <!-- second drop down will come based on first drop down value as you selected-->
Employee Name:    <select name="sele2">
            <option>--choose--</option>
    </select>

</form>

在第二个jsp（fetch.jsp）

<%@ page import="java.io.*,java.sql.*" %>
<%@ page contentType="text/html" pageEncoding="UTF-8"%>

<%
            response.setContentType("text/xml");
            String sn=request.getParameter("ok");
            int i=Integer.parseInt(sn);

                    Class.forName("oracle.jdbc.driver.OracleDriver");
                    Connection con =DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:XE","system","admin");
                    Statement st=con.createStatement();
                    ResultSet rs = st.executeQuery("select empname from emp where empno="+i);

                    out.println("<emp>");
                    while(rs.next())
                    {                            
                        out.println("<empname>"+rs.getString(1)+"</empname>");

                    }
                    out.println("</emp>");

rs.close();
st.close();
con.close();

%>