Question

我在JSP中定义了两个下拉列表。第一个下拉列表从DB中获取其值。在此下拉列表中选择值时，应根据第一个下拉列表的选定值从DB中提取第二个下拉列表的相应值。我使用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 scriplet将仅在页面加载时执行一次。我还认为重新加载整个页面不是一个选项，因为下拉列表将重置为其默认值。请帮助我解决我的问题。

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。这包括两部分。服务器：公开基于参数的webserivce（来自dd1的选定值）将检索dd2的值。客户：您已经在javascript中拥有了事件捕获代码。从javascript调用带有dd1中所选值的webservice。解析结果并使用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

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

2 个答案: