Hello All. Been playing around with some linked dropdowns. It seems to be a recurring theme here on DW, so I thought I'd offer this up as a possible solution or for discussion, to see how it could be improved.
Because no calls are made to the server following page load, this is not suitable for volatile data, as any changes on the server (database) would not be seen in the dropdowns until the page was refreshed.
The example shows the old chestnut, "Country | State | City" linked dropdowns, but the class allows any number of linked dropdowns.
I'll just run through a few line of code in the example page and explain what's going on, just in case it's not too clear.
$sql = "SELECT c.country_id, c.country, s.state_id, s.state, t.city_id, t.city FROM countries AS c INNER JOIN states AS s ON c.country_id = s.country_id INNER JOIN cities AS t ON s.state_id = t.state_id ORDER BY c.country, s.state, t.city";
This is a pretty typical joined SQL statement. The tables have this type of related structure.
FIELD TYPE -------- ---------------- country_id INT(3) UNSIGNED country VARCHAR(30) FIELD TYPE -------- ---------------- state_id INT(5) UNSIGNED state VARCHAR(30) country_id INT(3) FIELD TYPE -------- ---------------- city_id INT(5) UNSIGNED city VARCHAR(30) state_id INT(6)
Anyway, the next line:
$dropdowns = array("country"=>array(0,1),"state"=>array(2,3),"city"=>array(4,5));
Sets the key to the dropdown id attribute as in
<select id="country"> and
<select id="state">, etc.
The numbers in the arrays refer to the positions of the option item values and option item labels, respectively in the SQL statement. For example,
SELECT c.country_id, c.country, s.state_id, s.state, t.city_id, t.city
country_id field is at Position 0 and the
country field is at Position 1. We wish to make the
country_id field the value for the options in the country dropdown and the
country field as the labels to be displayed, as in:
<option value="1">UK</option> <option value="2">Ukraine</option> <option value="3">USA</option>
The same goes for the other items in the
<form> <select id="country" class="myLinkedDrops"> </select> <select id="state" class="myLinkedDrops"> </select> <select id="city" class="myLinkedDrops"> </select> </form>
should have dropdowns that have the 'id's listed in the
$dropdowns array. In addition, give the dropdowns a class with a shared name - it could be anything, I've used "myLinkedDrops".
In order to get everything working, you need to include 3 things in a specific order:
1) The jQuery library
2) The linkedDrops jQuery plugin
3) Attach the method to the dropdowns and set options with data from the php object,
Well, that should be it. As I mentioned, it should work with any number of linked dropdowns. One thing I haven't done is prepare this for more than one set of linked dropdowns. I'll leave that for a rainy day.
Comments as to how to improve this would be most welcome - especially on the jQuery plugin - it's the first one I've put online!
Apologies for the weird indenting below - editor cacked it up.
Edited by diafol