How to retrieve values in database and show in jsp select tag when another select tag is selected?

Question

Well in the project that I am working there's a database table containing the following fields :

From the database table I want to show beds that's available in the ward that's not occupied when the ward is selected , then in bed select tag should show only available beds .

The jsp form select tag code is :

 <div class="form-group">
                            <label for="course">Ward No:</label>
                                    <div class="form-select">
                                <select name="Ward" id="course">
                                    <option value="0">--Select Ward No---</option>
                                    <option value="ward1">1</option>
                                    <option value="ward2">2</option>
                                    <option value="ward3">3</option>
                                    <option value="ward4">4</option>
                                    <option value="ward5">5</option>
                                    <option value="ward6">6</option>
                                    <option value="ward7">7</option>
                                    <option value="ward8">8</option>
                                    <option value="ward9">9</option>
                                    <option value="ward10">10</option>
                                    <option value="ward11">11</option>
                                    <option value="ward12">12</option>
                                </select>
                                <span class="select-icon"><i class="zmdi zmdi-chevron-down"></i></span>
                            </div>
                                 </div>
                                 <div class="form-group">
                            <label for="bed">Bed No:</label>
                                    <div class="form-select">
                                        <select name="Bed" id="course">     
                                    <option value="0">--Select Ward No---</option>
                                    <option value="bed1">1</option>
                                    <option value="bed2">2</option>
                                    <option value="bed3">3</option>
                                    <option value="bed4">4</option>
                                    <option value="bed5">5</option>
                                    <option value="bed6">6</option>
                                    <option value="bed">7</option>
                                    <option value="bed8">8</option>
                                    <option value="bed9">9</option>
                                    <option value="bed10">10</option>
                                    <option value="bed11">11</option>
                                    <option value="bed12">12</option>
                                </select>
                                        
                                <span class="select-icon"><i class="zmdi zmdi-chevron-down"></i></span>
                            </div>
                                 </div>

So the question is how can I do this ?

I am new java development and this is my first project , so please excuse if any silly mistakes are found.

Thank you in advance for all helping out , its much appreciated.

Answer 1

After selecting the ward number you can generate the select tag as string from database using for loop and print out the result on html

Answer 2

The simple answer to your question is AJAX

Do an AJAX call to get the available beds from DB after selecting the ward number. Form the bed dropdown dynamically.

Example:

<select name="Ward" id="course" onChange="fetchAvailableBeds()">
......
</select>

function fetchAvailableBeds()
{
    var wardNo = $("#course").val();
    var queryUrl = "REST_URL";
    $.ajax({
    url     : URL,
    data    : "wardNo="+wardNo,
    type    : "POST",
    success : function(data, textStatus, jqXHR)
    {
        var responseJSON = jqXHR.responseText;
        var responseParsedJSON = JSON.parse(responseJSON);

        var bedDetails = responseParsedJSON.bedDetails;
        if(bedDetails.length > 0)
        {
            $('#bed').empty().append('<option>--Select Bed--</option>');
            for(var i=0;i<bedDetails.length;i++)
            {
                $('#bed').append('<option value="'+bedDetails[i].name+'">'+bedDetails[i].id+'</option>' );
            }
        }
        else
        {
            $('#bed').empty().append( '<option>--No Beds Available--</option>');
        }

     }
  });
}