CODEWITHSUNDEEP
javastruts2
Sagar
Sagar

Reputation: 161

Depending on first drop list selection, second drop down list should contain related contents

Depending on first drop down list item selection, i want a second drop down list should contain related contents. How can i do this in java? For instance, Let say, first Drop down list contains a name of countries, and second drop down list contains the names of states. And if i select a particular country, say "India", name from a first drop down list then second list should show only related states of country i.e states of "India". And both lists are dynamic.

Upvotes: 0

Views: 4012

Answers (3)

kgautron
kgautron

Reputation: 8263

I would recommend using javascript for this:

  • either with ajax, by making a struts action that returns the options, and reload your select content, for example with jquery:

    $("#stateSelect").load('http://host/myStateAction.do?country=' + country);

  • or loading the whole country/state mapping on page load, and update the second list with pure javascript with no server call. To do this you can for example store in each country option a data-states attributes, containing the corresponding states.

<option value="code" data-states="state1,state2,state3">countryName</option>

Otherwise if you want to avoid javascript, you can submit your form when a change event is fired, and on the server side (struts action) you fill the second list based on the value of the first, and redirect to the form page. <select onchange="documents.forms['myForm'].submit()">

Upvotes: 0

Shreyos Adikari
Shreyos Adikari

Reputation: 12754

You have to use JavaScript like below:
This is better to handle rather than from java side:

Here is your sample HTML File:

<select id="country" name="country" aria-required="true" class="required">
    <option value="">Select Your Country</option>
    <option value="USA">India</option>
    <option value="CA">Pakisthan</option>
</select>
<p><label for="state">Select Your State<span title="required">*</span>
</label></p>
<select id="state" name="state" aria-required="true" class="required">
    <option value="" selected="">Select Your State</option>
    <optgroup label="India">
        <option value="WB">West Bengal</option>
        <option value="BH">Bihar</option>        
    </optgroup>
    <optgroup label="Pakisthan">
        <option value="LH">Lahore</option>
        <option value="IB">Islamabad</option>
    </optgroup>
</select>

Here is your sample JavaScript:

var stateVar = $('#state option, #state optgroup');
stateVar.hide();
$('#country').change(function () {
    stateVar.hide();
    $("#state optgroup[label='" + $(this).find(':selected').html() + "']")
        .children()
        .andSelf()
        .show();
});

You can use AJAX as well and it might be a little complicated to you, so better to use simple JavaScript.
You can try this approach and let me know in case of any concern.

Upvotes: 0

Thihara
Thihara

Reputation: 6969

This is more Javascript than Java and struts 2.

There are two options you can get a Map with the first drop down's values as key and the other dropdown's values related to that item.

Then when the first combobox's value is selected you can get the values form the javascript map and set it to the second dropdown.

Other option is to send an ajax request on the first dropdown's selection and pupulate the second dropdown from the results.

Upvotes: 0

Related Questions