如何根据在另一个下拉列表中选择的值填充下拉列表？

Question

我在 JSP 中定义了两个下拉菜单。第一个下拉列表从数据库中获取其值。在此下拉列表中选择一个值时，应根据第一个下拉列表的选定值从数据库中获取第二个下拉列表的相应值。我使用 Javascript 和 jquery 来获取第一个下拉列表的值。但我无法弄清楚如何在 JSP 中引用这个值来填充第二个 JSP。

这是我的两个下拉菜单的 JSP 代码：

第一个下拉菜单：

<select name="dd1" id="dd1" style="width: 200px">
<option value="0">Choose New Salary</option>
     <%
     String Query1="select distinct Salary from TABLE1 where StartYear < 2005 order by Salary";
     Stmt1 = conn.createStatement();   
     ResultSet List1=Stmt1.executeQuery(Query1);

     while (List1.next())
     {
         int val1=List1.getInt("SALARY");
     %>

     <option value ="<%=val1%>"><%=val1%></option>
     <%            
      }
      %>                              

第二个下拉列表（我需要将 GETDD1DATA 替换为第一个下拉列表的值）：

<select id="dd2" style="width: 200px">
 <option value="0">Choose New Position</option>
 <%
 String Query2="select distinct POSITION from TABLE1 where Salary=" + GETDD1DATA + " order by POSITION";
 Stmt2 = conn.createStatement();   
 ResultSet List2=Stmt2.executeQuery(Query2);
 while (List2.next())
 {
       int val2=List2.getInt("POSITION");
 %>

 <option value ="<%=val2%>"><%=val2%></option>
 <%            
     }
 %>                           

这是获取第一个下拉列表数据的 Javascript/Jquery 代码（我可以看到第一个下拉列表的值正确存储在变量 selectedValue1 中）：

<script type="text/javascript">
   $(document).ready(function() {
     $("#dd1").change(function(){
      var selectedValue1 = $(this).val();
      //console.log(selectedValue1);
});
});
</script>

我需要将 selectedValue1 的值从 Javascript 传递到 JSP 并在变量 GETDD1DATA 中引用它。我探索了会话变量和隐藏元素来存储 dropdown1 值。但是这些不起作用，因为当会话变量尚未在 Javascript 中声明时，Java 脚本只会在页面加载时执行一次。我还认为重新加载整个页面不是一个选项，因为下拉菜单将重置为其默认值。请帮助我解决我的问题。

Answer 1

您没有使用 javascript 代码来填充第一个下拉列表。您使用 javascript 代码来捕获在第一个下拉列表中选择某些内容的事件。

您也不能将值从 javascript 传递到 JSP。 Javascript 可以与 JSP 页面生成的 HTML 交互。

您似乎对服务器端语言（在本例中为 JSP）做什么以及它如何工作没有一个清晰的概念。我建议你阅读http://www.javaworld.com/article/2076557/java-web-development/understanding-javaserver-pages-model-2-architecture.html。

所以您可以通过两种方式填写第二个表格： 将所选值作为参数传递给服务器，并使用 java 或 jsp 填写第二个下拉列表。每次您在第一个下拉列表中选择另一个项目时，这将导致完整的页面刷新。

第二种选择（更好）是使用ajax。这由两部分组成。 服务器：公开一个基于参数（从 dd1 中选择的值）的网络服务，它将检索 dd2 的值。 客户：您已经有了 javascript 中的事件捕获代码。从 javascript 调用具有 dd1 中所选值的 web 服务。解析结果并使用 javascript 将它们放入 dd2 中。

为了更好地理解查找服务器端脚本、POSTBACK 和 ajax（后者不需要回发并保持页面响应，这是要走的路）

Answer 2

请尝试

var x;

$('#pu-country').on('change', function () {
    if (this.value != '0') {

        $('#pu-city').prop('disabled', false);
        $('#pu-city').find("option").not(":first").remove();
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");

        switch (this.value) {
            case 'A':
                x = '<option value="A.1">A.1</option><option value="A.2">A.2</option><option value="A.3">A.3</option>'
        }
        $('#pu-city').append(x)
    } else {
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");
        $('#pu-city').prop('disabled', true);
        $('#pu-city').val("Choose");
    }


});

$('#pu-city').on('change', function () {
    if (this.value != '0') {

        $('#pu-location').prop('disabled', false);
        $('#pu-location').find("option").not(":first").remove();

        switch (this.value) {
            case 'A.1':
                x = '<option value="A.1.1">A.1.1</option><option value="A.1.2">A.1.2</option><option value="A.1.3">A.1.3</option>'
                break;
            case 'A.2':
                x = '<option value="A.2.1">A.2.1</option><option value="A.2.2">A.2.2</option><option value="A.2.3">A.2.3</option>'
                break;
            case 'A.3':
                x = '<option value="A.3.1">A.3.1</option><option value="A.3.2">A.3.2</option><option value="A.3.3">A.3.3</option>'
                break;

        }

        $('#pu-location').append(x)
    } else {
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");
    }


});

如果您想查看演示，请在此处尝试

Fiddler