CODEWITHSUNDEEP
javaoracle-databasejspjstl
Stanley Mungai
Stanley Mungai

Reputation: 4150

Populate values into a Drop down List based on another Drop down selection using 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.

How do I achieve this Functionality using JSTL?

Upvotes: 1

Views: 6402

Answers (4)

Barath
Barath

Reputation: 102

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

    })
})

Upvotes: 1

Gas
Gas

Reputation: 18030

In summary you have 3 options:

  1. JSTL solution - Resubmit page each time you select value in the 1st combo - to get selected value, do query and fill second combo - Rather bad from the performance point of view - lots of network round trips.

  2. JavaScript solution - load all combinations of hostels into the page and then switch contents of the second combo using javascript - rather ugly solution and loads unnecessary data from database to the page.

  3. Use Ajax - as others suggested, the best way in this case is to use some Ajax aware control, which would load the second combo based on the 1st selection.

Upvotes: 0

M The Developer
M The Developer

Reputation: 59

JSTL is interpreted server side on the initial request. So, once the page is loaded in the client browser the page is static. Unless you use javascript to bind the the change event of the first "Combobox1". then set the options of combobox2 to the appropriate values. This can be made easier with any JavaScript library such as jQuery, dojo, Ext.

Upvotes: 0

Eric C
Eric C

Reputation: 108

You won't be able to use JSTL to populate the second combo box dynamically because the JSTL is evaluated on the server, and so all its work is done once the page is loaded in your browser. If you REALLY want to use JSTL to do this, you'll have to reload the page every time you change the value of Combobox1, and add the relevant collection of options for Combobox2 into the HTTP response (in my opinion not worth it).

If you don't want to reload the page, you will have to use an Ajax call in order to grab and populate the options for Combobox2 from the server.

Upvotes: 2

Related Questions