使用 JSTL 根据另一个下拉选择将值填充到下拉列表中答案

【问题标题】：Populate values into a Drop down List based on another Drop down selection using JSTL使用 JSTL 根据另一个下拉选择将值填充到下拉列表中
【发布时间】：2014-02-10 07:37:36
【问题描述】：

我已经搜索了我所面临的问题但没有成功，我在一个 JSP 页面中有两个 ComboBox。第一个 Drop Down 是使用 JSTL 从数据库中获取校园名称值，如下所示：

<select name="hostelcampus" size="1" id="Combobox1" style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Arial;font-weight:bold;font-size:13px;">
                            <option value="SELECT">SELECT</option>
                            <c:forEach var="item" items="${obj.campusNames}">
                                <option>${item}</option>
                            </c:forEach>
                        </select>

第一个下拉列表中的数据库值填充得很好，我需要有一个功能，当我从这个下拉列表中选择一个值时，第二个下拉列表应该列出选定校园中的旅馆名称而不是全部旅馆。我的第二次下拉

<select name="hostel" size="1" id="Combobox2" style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Arial;font-weight:bold;font-size:13px;">
                            <option selected value="SELECT">SELECT</option>
                            <c:forEach var="item" items="${obj.hostels}">
                                <option>${item}</option>
                            </c:forEach>
                        </select>

这意味着一旦我选择了我的第一个下拉菜单，将触发一个查询，以根据我的第一个选择从数据库中获取值。

如何使用 JSTL 实现此功能？

【问题讨论】：

您将不得不使用 ajax。在第一个下拉框中的值更改时将对 servlet 进行 ajax 调用。 Servlet 将提供选项列表，您必须将其填充到第二个下拉列表中。
基本上你不能用 JSTL 做到这一点。你需要使用 Ajax。

标签： java oracle jsp jstl

【解决方案1】：

您将无法使用 JSTL 动态填充第二个组合框，因为 JSTL 是在服务器上评估的，因此一旦页面加载到您的浏览器中，它的所有工作就完成了。如果您真的想使用 JSTL 来执行此操作，则每次更改 Combobox1 的值时都必须重新加载页面，并将 Combobox2 的相关选项集合添加到 HTTP 响应中（我认为不值得）。

如果您不想重新加载页面，则必须使用Ajax call 才能从服务器获取和填充 Combobox2 的选项。

【讨论】：

【解决方案2】：

用第一个下拉菜单绑定一个 jQuery 函数

$('select[name=hostelcampus]').change(function(){

    var campus = $(this).val();

    //Here, make a call to a servlet to get the list of hostel names and,
    // pass the campus ( value of first dropdown ) as a parameter


    //Get a response in the approriate way

    //Assign the list of values to the second dropdown

    //Assuming that you got a string of comma-separated values, 

    var values = response.split(",");

    var hostels = $('select[name=hostelcampus]');

    $.each(values, function(index,value){

         $('option').val(value).text(value).append(hostels);

    })
})

【讨论】：

【解决方案3】：

JSTL 在初始请求时被解释为服务器端。因此，一旦页面在客户端浏览器中加载，页面就是静态的。除非你使用javascript绑定第一个“Combobox1”的change事件。然后将 combobox2 的选项设置为适当的值。这可以通过任何 JavaScript 库（如 jQuery、dojo、Ext）来简化。

【讨论】：

【解决方案4】：

总的来说，您有 3 个选项：

JSTL 解决方案 - 每次在第一个组合中选择值时重新提交页面 - 获取选定的值，进行查询并填充第二个组合 - 从性能的角度来看相当糟糕 - 大量网络往返。
JavaScript 解决方案 - 将所有旅馆组合加载到页面中，然后使用 javascript 切换第二个组合的内容 - 相当丑陋的解决方案并将不必要的数据从数据库加载到页面。
使用 Ajax - 正如其他人建议的那样，在这种情况下，最好的方法是使用一些 Ajax 感知控件，这将根据第一个选择加载第二个组合。

【讨论】：