Load dropdown according to the value of another dropdown - without refreshing the page in PHP

Question

Hi Friends,

I have created a page in PHP, in that i need to load a dropdown2 corresponding to the value of dropdown1 without refreshing the page. The values for those dropdown's are from the database.

I dont want to refresh the page for every click, Please guide me regarding this..

Answer 1

two when you have sent your page to the client, PHP is done. all you got there is JavaScript.

1. Ajax: you can use Ajax calls, when your first dropdown is selected. define a function in JavaScript, so when an option in the first dropdown is selected, it will call a URL, and send the ID of the selected item to that URL, and fetch the XML result and use that to populate the second dropdown.

2. JavaScript Arrays: this approach is like the other, the difference is that all data of both dropdowns are already sent to the client in the page, as Javascript objects, or arrays. by selecting an option from the first dropdown, your JavaScript function will populate the second dropdown using local Arrays, or Objects, instead of calling an Ajax call.

the second method has the benefit that changing the second dropdown is faster, and will not require another connection. but the first time the page is loading will take longer, because all of your dropdowns data should be loaded first. I have used the second method in some of my pages, but if you have a tremendous amount of data to fetch for each option of your first dropdown, the better way is the first one.

I recommend using a well-known framework for these, like jQuery. it will ease all of your work. you can call ajax calls, and change children of the second dropdown easily.

edit:

in the first method (AJAX call) I said load data from XML. I meant making an AJAX connection to the server, to some PHP page that will accept an argument, like the value of selected option in the first select tag, and then searches the database on the server, fetches related results and returns an XML document that have all the vlues for the second select tag. and in your JavaScript function that made the Ajax request, you can parse that XML and create option tags for second select tag on the fly, based on the result XML. your PHP script accepts a value and can do anything based on that value. the XML part, is just a transfer tool.