18 Sep

Auto-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

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)

142 Responses to “Auto-populate multiple select boxes”

daweb February 1st, 2008 at 4:15 pm

Hi and thank you about this excellent work.

How can I select pre-select an option that is contained in a db row?

I have this:

$json[] = '{"id" : "' . $row->id . '", "label" : "' . $row->name . '"}';

something like {selected: "selected="selected""}

Regards guys

Donna February 29th, 2008 at 5:22 pm

HI
I'm trying to get this to work to select Make/Model/Year for cart parts .. problem is Year is stored in another table. So I tried to make the table names variables to they will pass in ... it obviously works the first time through cause I'm getting the correct list in the second box - but it doesn't seem to pick up the third column.

So I must be missing some logic about how this all works.

http://www.dbkonline.com/MYWEBSITE/QP/make_model5.php

Code below.

thanks - I hope someone can help.

Donna
DBK Web Development, LLC

I have this:


 if ($connected) {
 $sql='select * from $table where".$ID. "="' . strtolower(mysql_real_escape_string(strip_tags($_REQUEST['category']))) . '"';
$results = mysql_query($sql);
$json = array();

     while (is_resource($results) && $row = mysql_fetch_object($results)) {
         $json[] = '"' . $row->$Data . '"';
      $table = "PARTS";
      $ID = "ModelID";
      $DATA = "Year";
   }

      // if connected
       echo '[' . implode(',', $json) . ']';
    die(); // filthy exit, but does fine for our example.
}
else
{user_error("Failed to select the database");echo "Not connected";}
}  // end Ajax?>

DonnaNJ March 1st, 2008 at 8:00 pm

Ok - I gave up on the two tables and got it all working here

http://www.dbkonline.com/MYWEBSITE/QP/make_model6.php

However - now when I process the form - since all the options are called "category" - I loose everything but the last one ...

How can I pick up all three answers ... I tried saving them ... changing the name and pssing that in as a variable but nothing seems to work.

Can you show and example of processing this form based on the selection?

thanks
Recursos y Tutoriales » Blog Archive » 240 plugins de jquery increible!! March 3rd, 2008 at 1:09 pm

[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
Grom’s home » Blog Archive » [转]240多个jQuery插件 March 11th, 2008 at 3:38 am

[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
Hek March 18th, 2008 at 7:17 pm

How can I modify this to work with coldfusion5 and MsSQL?
百变贝贝 » 上百个让你事半功倍的jquery插件 March 20th, 2008 at 2:15 am

[...] Select List Multiple Selects Select box manipulation Select Combo Plugin jQuery - LinkedSelect Auto-populate multiple select boxes Choose Plugin (Select [...]
sonic March 21st, 2008 at 6:18 am

Hi there,

Thanks very much for the plugin. However, I can't seem to get it to work with the structure I want.

I want to return a JSON object of the form:
[{"id":112,"name":"Value 1"},{"id":213,"name":"Value 2"},{"id":233,"name":"Value 307"},{"id":401,"name":"Value 4"},{"id":415,"name":"Value 5"}]

So I am using the plugin as follows:
$('#categorySelect').selectChain({
target: $('#elementSelect'),
url: 'select-chain.php',
key: "id",
value: "name",
}).trigger('change');

I see that you have a very similar structure commented out in the sample code. However, when I do return an object of this form, I get "Undefined" for each option in my select box. Therefore, how can I make this work, or can you suggest the best structure to return a list of id's with the values?

Thanks v much!
La boîte à outils du codeur de site Web « Mashuphowto’s Weblog March 30th, 2008 at 4:20 pm

[...] Auto-populate multiple select boxes [...]
1000 ressources pour le développement web et WordPress at pr0g March 31st, 2008 at 12:18 pm

[...] Auto-populate multiple select boxes [...]
强烈推荐：240多个jQuery插件 at 备忘库－冷 April 2nd, 2008 at 1:38 am

[...] Select List.Multiple Selects.Select box manipulation.Select Combo Plugin.jQuery - LinkedSelectAuto-populate multiple select boxes.Choose Plugin (Select [...]
胡松的博客 » 强烈推荐：240多个jQuery插件 April 5th, 2008 at 6:28 pm

[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
240 adet jquery ekelntisi - Volkan Şentürk April 9th, 2008 at 9:57 am

[...] Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery - LinkedSelect Auto-populate multiple select boxes. Choose Plugin (Select [...]
dimitriusai April 11th, 2008 at 11:11 am

Hello, i have a question about the 3 select.
They have the same name "type".
According to you, how is it possible to know the value of the first select or the second,...

In a POST ==> $example = $_POST['type']

Thanks a lot
HJ April 22nd, 2008 at 1:57 pm

I wanted to post that I have the script working with multiple tables now. The problem was the JSON returned was returning an entire queryset encoded, but what I should have done was return only the column that I needed. AJAX is new to me, but JQ is helping me along with it and it's starting to make more sense the more I play with it.

Thanks for the script!
HJ April 23rd, 2008 at 12:10 pm

{"recordcount":4,"columnlist":"SPECIE,SPECIEID","data":{"SPECIE":["Baiji","Western Gorilla","Sumatran Orangutan","Speke\'s Gazelle"],"SPECIEID":[1,2,3,4]}}

I'm trying to use the key/value options, how do i do that with above JSON? The component that i'm using returns the above code, i'm not sure how to grab the key and value out of it for your plugin. The other thing that i'm trying to understand, how do I do the following:

SPECIE

Are there any examples that show how to use the key / value options?

Look forward to your response or anyone else that can shed light on the matter.

Thanks!
HJ April 23rd, 2008 at 12:12 pm

that's it, i give up, i'm not going to try to put the option tag in, i'm giong to explain it and I hope that it will make sense. i'm trying to add the value attribute to the option tags that are within the select. I want to take the id and the name and populate like that. does this plugin work like that or do i have to make my own homegrown solution?
Blog Author Remy Sharp April 23rd, 2008 at 1:49 pm

@HJ - do you have a link to an example what you're talking about?
» 1000 ressources pour le développement web et WordPress : la grosse grosse liste « css4design : des css pour votre design html April 23rd, 2008 at 4:20 pm

[...] Auto-populate multiple select boxes [...]
HJ April 23rd, 2008 at 8:35 pm

Hi Remy, thank you for replying, sorry about all the unsuccessful posts, i kept receiving errors on the blog.

Anyhow, here is the link to the sample page that I put together, it's not exactly like yours , but it will give you an idea:

http://ts.7079.net/jquery/cascadingSelects/

I had the script working when I was just returning a single column of data and not the entire query. I was hoping that I can return the entire query and the data rather than having to strip it down for the plugin so that I can use the same data elsewhere if need be. I was hoping to find out how I can take the specieid and drop that in the value attribute of the option tag and than between the option tag drop in the specie name. I've tried every which way possible and have been unsuccessful with it, hoping that you can shed some light. Also, can you explain how to properly use the key and value options of the plugin? I had a tough time and tried so many things but could not get it to work.

The working example with the JSON only returning a single column from the database rather than the entire query is here:

http://ts.7079.net/jquery/cascadingSelects/index_old.cfm

I look forward to your help and I would like to thank you in advance. Once you shed light on this, i'd like to give you the working ColdFusion script to offer on your site for those out there who are in need of your plugin and work with CF.

Thanks again!