Work
SubscribeAuto-populate multiple select boxes
To follow on from Auto-populating Select Boxes using jQuery & AJAX, I've had more than a few requests for how to do this for multiple select boxes.
In response, I've written a jQuery plugin and have included a simple example of three select boxes populating each other driven by a MySQL database.
Download
- Download the selectChain plugin
- View the demo PHP script source
- View the demo SQL source
- Demonstration
Prerequisites
- jQuery (this has been tested with 1.1.1 and 1.2 - so it should be fine).
- Basic knowledge of JSON
- Access to the server side for PHP and MySQL if you want the selects driven by a database.
Disclaimer
I have to admit I wrote the plugin pretty quickly, so it might not have all the bells and whistles you might want it to have - but it definitely does the job.
Also, the demo I've provided does not degrade if JavaScript is turned off. I advocate that you practise accessible JavaScript. This example is just to show the plugin working. Remember to make it work via the server-side too!
Demonstration
This demonstration uses three select boxes, the first (element category) drives the next (elements) which drives the next (attributes).
You should keep in mind this demo was written quickly, and I would never normally use the same name attribute on a select box, because when it comes to actually submitting the form, it would be a mess of values.
See the multiple-select population in action
Usages / Config
$('#categorySelect').selectChain({
target: $('#childCategorySelect'),
url: 'update-options.php'
});Required
- target: jQuery object or HTML element
- url: string to Ajax request
Optional
- key: key of the key/value pair if you're returning an array of objects. Defaults to 'id'.
- value: value of the key/value pair if you're returning an array of objects. Defaults to 'label'.
- data: additional data values to send in the request (can be a string or object)
- type: Ajax request type, i.e. post or get
What next?
Here's a list of small bits that I think could be added to improve this plugin, but should be simple enough for anyone to write:
- Caching Ajax results.
- Ability to send the data (posted or get) based on a dynamic criteria - i.e. perhaps there's another static select box.
- Using meta data in the classes to link the targets to the parents - but this might make for sloppy markup.
Feel free to add any suggestions or improvements.
You should follow me on Twitter here I'll tweet about JavaScript, HTML 5 and other such gems (amongst usual tweet-splurges)
Introducing HTML5%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D85829731.-%3B)
Can anybody give me an example of how to add the id as the value of the select box? like:
option value="1"
I've been trying, but no luck. Thanks for any help.
@Justin
Here's what I did.
If I have select Box A that populates Box B:
src_sys.change(function() {
A.selectChain({
target: B,
url: '/cgi-bin/script.pl',
type: 'get',
key: 'id',
value: 'name'
});
I have my "script.pl" script return JSON like this:
[{id: 1, name: "ONE"},{id: 2, name: "TWO"},{id: 3, file_name: "THREE"}]
The select (B) turns out like this:
Hmm - it took out my "select" and "option" tags...
Basically, the id of the first option is 1, and the text is ONE, and so on....
[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
Hi,
thanks for excellent work! It works like a charm!
One minor bugfix, it should be:
setTimeout(function () {
settings.target.find('option:first')
.attr('selected', 'selected')
.parent('select');
settings.target.trigger('change');
}, 0)
because if you chain the trigger method, and you have no options in any of the select boxes from ajax, then the trigger will not occur and we want it to clear all the rest of boxes, don't we?
[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
[...] Rellenar automáticamente Selects Múltiples [...]
[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
[...] Auto-populate multiple select boxes [...]
Hi Remy,
Is there any way to add a callback function? If not, consider this a feature request
[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
hi, is there a way to show an icon while script is loading data?
[...] Auto-populate multiple select boxes [...]
[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]