Update 18 November 2013

At some point, the jQuery team deprecated the use of .attr() and then removed it altogether, replacing it with .prop(). I'm not sure which versions this occurred in, but at the time of this update jQuery 1.10.2 and 2.0.3 are current and .attr() is not supported at all.

I have updated this post to use .prop() instead of .attr() and tested it with both 1.10.2 and 2.0.3 in Chrome 31 on OSX Mavericks. I've also added a link to the HTML and PHP files which can be used as-is once the test database table has been created (the SQL is in the PHP file) and the credentials added to the file.

Downloadable example

A downloadable example can be found here. This contains a PHP file which connects to the database and returns data when the fruitName parameter is specified.

ll you need to do is add in your database name, login name and password to the PHP file and create the fruit table. The SQL for doing this is included in a comment at the end of the PHP file.

The HTML file should then work as-is, as long as you run the whole thing through a web server (e.g. don't just open the HTML file in your web browser and expect it to work).

Working example

The example below doesn't actually make a JSON call with jQuery but does illustrate how the example detailed in this post works. It won't work if you are reading this in a feed reader so be sure to click through to view it in a web browser.

Fruit:Variety:

Select a different fruit from the first select and it will change the available varieties in the second select.

The "$.getJSON('/fruit-varities.php', {fruitName:$('#fruitName').val()}" line is what retrieves the data and it passes the currently selected fruit name value as part of the get string to the PHP script.

PHP Code

The PHP script connects to the database, retrieves the data for the selected fruit name and then returns it as a JSON encoded string.

Caching issues

Internet Explorer and Firefox will cache the subsequent requests made to the same fruit name but the other browsers won't, requesting them again each time. There are a couple of ways to solve this which is covered in another post.

Radio buttons instead of select boxes

Further reading

I haven't written much in the way of comments for each of the above code snippets; they've all been covered to some degree in previous posts which led up to this one. Please refer to these in the "Previous Posts" section at the top of this post or the "Related Posts" list below.