CODEWITHSUNDEEP
jspdrop-down-menu
dd700342
dd700342

Reputation: 1

JSP drop down list question

I would like to ask a question

I want to show 3 drop down list in one JSP page,

where the the second drop down list is based on the selected value in the 1st drop down list,

and so on...

According to my limited knowledge, when user selects a value from drop down list,

the user needs to click a button to pass the value to server side.

like this:

<form action="second_drop.jsp">
   <select name="drop">
    ...
   </select>
   <input type="submit" value="Submit" />
</form>

Now, I would like to ask a question,

is it possible to pass the drop down list value without clicking button?

that is, when users select a value from drop down list,

the selected value can be automatically passed to server side without clicking submit button.

then the server will based on the selected value to display the second drop down list

thanks for help.

Upvotes: 0

Views: 5425

Answers (2)

Matt Ball
Matt Ball

Reputation: 359836

It is absolutely possible to do this using the mystical power of ajax! This particular behavior you're looking for is called "chained dropdowns" or "dependent dropdowns." Here's how I'd do it with jQuery, heavily commented so it's (hopefully) clear:

Markup

<form action="second_drop.jsp">
   <select id="first_drop" name="drop">
    ...
   </select>
   <select id="second_drop" disabled="disabled"></select>
   <input type="submit" value="Submit" />
</form>

JavaScript

$(function () // run the following code when the DOM is ready
{
    $('#first_drop') // equivalent to document.getElementById('first_drop')
        .change(function () // run the following code whenever the DDL value changes
        {
            var val = $(this).val(); // get the new value of the first DDL
            $('#second_drop').load(
              'second_drop.jsp', // this is the URL to load
              {drop: val} // pass this data to the server with the request
              function () // execute this function when the response comes back
              {
                  $('#this').attr('disabled', false); // enable the 2nd DDL
              });
        });
});

second_drop.jsp should respond with a list of <option>s:

<option value="val1">Option 1</option>
<option value="val2">Option 2</option>
<option value="val3">Option 3</option>

There's a lot there, if you're not familiar with JavaScript and/or jQuery, so just ask if there's anything you don't understand.

jQuery functions used

Upvotes: 5

Gnat
Gnat

Reputation: 2921

This is possible and is sometimes used with address dropdowns, e.g. select a country and then the list of states/provinces is populated, and also with flights, e.g. select a departure airport, and the list of possible destinations is filtered.

To do this you will need client-side Javascript. You will need to wire up the onchange event so that it will submit the form (or make a request to another page) to communicate back with the server to get the new list.

e.g. (although you will need to set maybe a hidden field to say "this is a dropdown refresh, not an "I'm finished entering my data" submit)

<form>
<select name="drop" onchange="this.form.submit()">
...
</select>
</form>

You might want to read the answers to JSP: drop down list 2 depends on drop down list 1 - there are multiple ways to do it and it depends on what you need to do.

Upvotes: 0

Related Questions