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调用才能填写第二个下拉列表。

代码中的错误：

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

在第一个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();

%>

从属下拉列表无效

2 个答案: