Question

我搜索了我面临的问题没有成功，我在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>

第一个Drop down正在填充数据库值，我需要有一个功能，当我从这个Drop down中选择一个值时，第二个下拉列表应该列出所选的Campus中的宿舍名称而不是全部旅馆。我的第二次下降

<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>

这意味着一旦我选择My first Drop down，就会触发一个查询，根据我的第一次选择从数据库中获取值。

如何使用JSTL实现此功能？

Answer 1

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

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

Answer 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);

    })
})

Answer 3

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

Answer 4

总之，您有3个选项：

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

使用JSTL基于另一个下拉选择将值填充到下拉列表中

4 个答案: