使用JSTL根据另一个下拉选择将值填充到下拉列表中 [英] Populate values into a Drop down List based on another Drop down selection using JSTL

问题描述

我已经搜索了我所遇到的问题，但是没有成功，我在JSP页面中有两个ComboBox.第一个下拉列表是使用JSTL这样从数据库中获取校园名称"值:

I have searched for the problem I am facing without success, I have two ComboBox in a JSP page. The first Drop Down is getting campus Names values from the database using JSTL like this:

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

第一个下拉列表使用数据库值填充得很好，我需要具有某种功能，以便当我从该下拉列表中选择一个值时，第二个下拉列表应列出所选校园中的旅馆名称，而不是全部列出旅馆. 我的第二个下拉

the first Drop down is getting populated fine with the database values, I need to have a functionality such that when I select a value from this Drop down, the second drop down should list the Hostel Names In the Campus Selected and Not all the Hostels. My second Drop down

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

这意味着，一旦我选择我的第一个下拉列表"，就会触发查询以根据我的第一个选择从数据库中获取值.

This means that once I select My first Drop down, a query will be fired to get the values from the database based on my first selection.

如何使用JSTL实现此功能?

How do I achieve this Functionality using JSTL?

推荐答案

使用第一个下拉列表绑定jQuery函数

Bind a jQuery function with the first dropdown

$('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);

    })
})

这篇关于使用JSTL根据另一个下拉选择将值填充到下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！