dropdown menu populated from a database in a client side page

Question

I want to populate the data from a database using client side programming either HTML or javascript. I looked online and got lot of sites giving examples on server side i.e. JSP,ASP or PHP for creating the dropdown menu. I know the simple syntax for creating the HTML dropdown menu and in other languages. But I don't know how to populate that HTML dropdown menu values from the database. Any technique which either gets the data from the JSP page which fetches the data from the database and on selecting a single item triggers a query to JSP page which again fetches data from the database can work for me.

Problem: I want to access the database fields from a html page. The dropdown list of html page should be populate from the database and on selecting a specific value it should get data specific to that option.

Any ideas or links to the sources I should look at.

duplicate of [Populating child dropdownlists in JSP/Servlet](http://stackoverflow.com/questions/2263996/populating-child-dropdownlists-in-jsp-servlet) — BalusC, Nov 03 '10 at 19:33
@BalusC: Thanks for useful link. I am new to jquery and I have also not much web development experience. So sorry if I ask some stupid questions.Actually what I want to achieve is I want to populate a list dynamically (i.e. from jsp page) when I select some item or on click another call to another JSP page is made. I have code for the second half I was using xmlHTTPrequest a ajax call the code for which i have already writen and tested. So can this work. — Judy, Nov 06 '10 at 10:25

score 1 · Answer 1 · answered Dec 01 '14 at 22:20

Just so you can get a general idea of the mechanism: How about an Ajax-call triggered by an event listener like this (could also use click event or whatever):

After the html-document is loaded, add an event listener to the watched element (here onchange) and call a function when the event is triggered:

$(document).ready(function() {
    $('#watchedElement').change(callAjaxFunction());
});

Function for Ajax-call: In the data variable you can send information to the server to decide there which options to send back. Easiest way (though quick and dirty) would be to return (like "echo" in php) the option values in plain text/html and replace the old option-elements with this. I prefer the JSON-ways described in the link from your question's comment, since you have a lot more control on the data but for a first impression you could try if the mechanism works for you in general:

function callAjaxFunction() {
    $.ajax({
        type: "POST",
        url: url,
        data: { "selectedValue": $('#watchedElement').val() }
        success: function(data) {
            $("#idOfSelectElement").html(data);
        }
        dataType: "HTML"
    });
}

Just for testing purposes without any evaluation of the value sent to the server you could send back two dummy options like this (example is php file for simplicity and you even could use an html-file that only contains the text itself):

<?php
echo "<option value='test1'>Test1</option>" .
     "<option value="test2">Test2</option>";
?>

Still it's probably better to go the JSON way and add element by element, which makes dbugging and stuff way easier later on.

Whoops, didn't see that this question is 4 years old - most likely there is a solution found by now ;-) — Fuzzzzel, Dec 01 '14 at 22:40

dropdown menu populated from a database in a client side page

1 Answers1