Populating a Dropdown list in PHP dynamically

Question

Hi,

I have a small PHP page which contains two drop down lists

I need to populate the second one according to the result selected in the first drop down list .... is this possible? In other words I need to use the value selected from the first drop down list and use it in the dB query used to populate the second drop down list (but this should be populated upon selection of the first drop down list.

If this is possible any hints please? (you can assume that I am able to populate the first drop down list from the dB)

thanks

Answer 1

You will have to use AJAX to send the selection of the first dropdown to the server. You can then query the database and generate the second dropdown and send it back to the user.

Answer 2

Option 1: embed the data for the second select in the document as hidden elements or JS objects. A change event handler on the first select will populate the second select. A List Apart has an example dynamic select page.

Option 2: use AJAX. When the first select changes, make a request to the server for the contents of the second select, then populate it. With a JS library (such as jQuery), this becomes quite easy.

$('select#one').change(
  function (evt) {
    $('select#two').load('/thing/'+this.value);
  }
);

"/thing/<val>" identifies your server side script to generate a list of items based on "<val>" (use the rewrite facilities of your webserver to resolve the URL path to the actual script). You could simply have it always generate <option> elements, but a better design would be to include a way to specify the result format, so it could output the list as <li>, using JSON or some other format.

$('select#one').change(
  function (evt) {
    $('select#two').load('/thing/'+this.value, {fmt: 'option'});
  }
);

Answer 3

You'll need an asynchronous call back to the server, without a page reload. (I doubt that you actually want to have a button that posts back to the server) So AJAX is something that can do exactly that. Add an AJAX call to your first dropdown's onchange event handler that posts the selection back to the server and returns the contents of the second dropdown. When the AJAX call returns the new values, you will use it to build your content for the second dropdown. Most of this is done in Javascript, of course, besides the actual server part, which will remain in PHP.

Answer 4

There's two ways of doing it. The old-school "select an option and submit to rebuild the page" method, which works pretty much universally, and the newfangled AJAX methods, to load the second dropdown's contents without refreshing the page.

Both have advantages/disadvantages, so it boils down to what's best for your purposes. The oldschool method doesn't require any javascript at all, but since it does round-trip the form through the server, you'll get the "clear the window and then redraw the page" flickering.

The AJAX method bypasses the refresh flicker, but also would no work on Javascript-disabled browsers. It does require a little bit more code, client-side, to handle the AJAX calls and population of the dropdown, but the server-side code would be pretty much the same for both methods: same queries, same retrieval loops, just different output methods.