How to get value to dropdown from database using ajax ?

Question

Hi,

I have dropdown with some optional value.if change the those value based on that will display another dropdown with value from database.I am doing this process in jsp page.First dropdown values are static(coded in jsp).but second dropdown values are come from database when changeevent of first dropdown.

Here i need to implement ajax or javascript ? Could you give me examples of this drop down.

one dropdown have static value like name,address,city like.

<select id="search" onchange="menu_changed();">
                               <option></option>
                               <option>name</option>
                               <option>address</option>
                               <option>city</option>
                               </select

Now, database coloumn name name,address,city like that.

if i select "name" in first drop down, enable the second dropdown with list name.Those name should come from database.

Please give me your ideas.

Answer 1

If your happy to use jQuery start reading here http://api.jquery.com/jQuery.getJSON/

Have your selectbox 1 change event menu_changed call getJSON for example

var select1value = document.getElementById('search').value();

   $.getJSON('urlToYour.jsp?id='+select1value , function(data) {
         write JavaScript code here to populate your 2nd drop down list using the JSON stored in the data variable);
});

Answer 2

Hi, javascript is an integral requirement of ajax. AJAX means Asynchronous Javascript and XML. Here you need to send an xmlHttpRequest to the server and fetch the contents of the 2nd dropdown from the database as per the selected option in first drop down box. When you get the response in javascript, fill the 2nd select box with these values. This will happen on every onchange event of the 1st dropdown box