CODEWITHSUNDEEP
jqueryhtmlformsjsp
drstein
drstein

Reputation: 1113

Populate a drop down with jquery using another drop down

I'm a beginner with jsp and jquery but I need your help to do something.

I am retrieving all entities University from my portlet and I'm populating with those a Select like this:

<%
List<University> us = UniversityLocalServiceUtil.getUniversitys(0, UniversityLocalServiceUtil.getUniversitysCount());
%>

 <div id="wrap">
<p>University</p>

<div>
    <label><span>Select an university:</span> <select
        name="unis" style="width: 259px">
            <option value="">-- SELECT --</option>
            <%
                for (University u : us) {
            %>
            <option value="<%=String.valueOf(u.getIdUniversity())%>">
                <%=u.getName()%>
            </option>
            <%
                }
            %>
    </select> </label>
</div>

then I have an hidden div which I want to reveal and populate with all the Faculties of the selected University.

 <div id="wraptwo">
 <p>Faculty</p>
    <div>
    <label><span>Select a Faculty:</span> <select
        name="facs" style="width: 259px">
            <option value="">-- SELECT --</option>
        <!-- TODO HERE -->  
    </select> </label>
</div>

I show it with the script:

<script>
$("#wraptwo").hide();
$('select[name="unis"]').change(function() {
    var uni = $(this).val();
    if (uni.length >= 1) {
        $("#wraptwo").show();

    } else {
        $("#wraptwo").hide();
    }
});

My problem now is that I need the value of the select called "unis" in order to retrieve all the faculties of the selected university with the method:

University u = UniversityLocalServiceUtil.getUniversity(primary_key_of_the_university);
List<Faculty> fs = u.getFacultys();

Upvotes: 0

Views: 159

Answers (2)

Zach
Zach

Reputation: 447

Try this:

$( "select.unis option:selected").val();

To pass the value back to the server, you could use an ajax call. Something like this:

var uni = $( "select.unis option:selected").val();

$.ajax({
    url: '/your-url', // path to your url which gets this ajax request
    method: 'get', // or a http method you want to use
    data: {
        uni
    },
    success: function(response) {
        alert(response);
    }
});

Syntax might be incorrect, but that's the gist of it.

Upvotes: 1

bresleveloper
bresleveloper

Reputation: 6070

i think ur looking for this?

var uni = $(this).val();
$("<option></option").val(uni).text(uni).appendTo($("select.facs"))

Upvotes: 0

Related Questions