How To Change Dropdown Options Based On Another Dropdown Selection? Values Retrieved From The Database

I am working on this for few days and could not find a final solution. I went through similar SOF questions, but do not know why cannot I figure this out. I have three dropdowns. A

Solution 1:

Well, the result from your ajax call is sent back as single response. You are then putting that whole response into a single option tag

 $("#update").html("<option>"+res+"</option>");//options are added to second dropdwon

If your ajax call is returning a response in the same manner as your code above

 foreach ($loans as $loan) {
             echo  <option value='$loan->id'>$loan->loan_type</option>";                           

                    }

Then you can just do something like...

document.getElementById('update').innerHTML=res;

EDIT

As for your error, I'd need to see the getter.php to give you exact instructions, but basically it is saying it can't find what you are looking for in the database. Your ajax call isn't failing, your database query is.

My guess would be you are forgetting to pass any parameters through ajax to your getter.php code. You can see how to pass info from ajax at http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp.

Edit 2

Your PHP is returning a single text string that looks like

<option value='id'>bla blah</option><option value='id'>bla blah</option><option value='id'>bla blah</option><option value='id'>bla blah</option>

In other words all the options at once. You are then putting those options into a single option tag.

Check the results of your ajax by just doing...

alert(res);

If it shows you a a string that is a bunch of option tags, you shouldn't put them in another option tag. Just at them to the select tag like..

document.getElementById('update').innerHTML=res;

If the string is empty and alert shows you nothing it means your database query didn't find any matches and returned empty.