Work
SubscribeAuto-populating Select Boxes using jQuery & AJAX
Update: due to popular demand, I've caved in, and written a plugin and demos with multiple-select boxes populating each other and driven from MySQL.
If you are familiar with using select boxes for categorisation and sub-categories, such as ebay does when selling an item, usually this can require a lot of JavaScript to maintain the select boxes, but jQuery can hugely simplify this task by adding a dash of AJAX.
The Goal
Allow the user to select a top level category from one select box and to automatically populate the sub-category.
Prerequisites
- Latest copy of jQuery
- A basic understanding of JSON (don’t let this put you off - it’s really very, very easy)
- A server-side script that can respond to the AJAX request (though I’ve provided a simple example)
Demo
Our demo will specifically look to build a simple form that allows us to book human resource for a project. The top level category is the resource type, and the sub-category will list the individual’s names.
How it works
Once the top level category select is changed, it sends an AJAX request for the sub-categories. The result of which are converted to select options and the sub-category select’s elements are replaced.
Unobtrusive JavaScript
First things first: as with any page that is loaded with JavaScript and AJAX functionality, it should work without JavaScript.
To achieve this for our tutorial here’s what we need to ensure:
- When the page is loaded, the sub-category is loaded (if the top level has a selected item).
- There is a ‘load sub-category’ button the user can select to re-load the page. We will hide this button with a <noscript> tag in our demo.
The Code
There are 4 parts to this demo.
- The page’s HTML.
- The server-side code to produce the dynamic page (i.e. to pre-load the select boxes when the user first visits).
- The jQuery & JavaScript.
- The JSON response (which will reuse the server-side code).
HTML
<form action="/select_demo.php">
<label for="ctlJob">Job Function:</label>
<select name="id" id="ctlJob">
<option value="1">Managers</option>
<option value="2">Team Leaders</option>
<option value="3">Developers</option>
</select>
<noscript>
<input type="submit" name="action" value="Load Individuals" />
</noscript>
<label for="ctlPerson">Individual:</label>
<select name="person_id" id="ctlPerson">
<option value="1">Mark P</option>
<option value="2">Andy Y</option>
<option value="3">Richard B</option>
</select>
<input type="submit" name="action" value="Book" />
</form>
Server-side
This is just a simple example, but it should be obvious that you can expand this to go off to a database and return an object in a JSON data structure:
<?php
if ($_GET['id'] == 1) {
echo <<<HERE_DOC
[ {optionValue: 0, optionDisplay: 'Mark'}, {optionValue:1, optionDisplay: 'Andy'}, {optionValue:2, optionDisplay: 'Richard'}]
HERE_DOC;
} else if ($_GET['id'] == 2) {
echo <<<HERE_DOC
[{optionValue:10, optionDisplay: 'Remy'}, {optionValue:11, optionDisplay: 'Arif'}, {optionValue:12, optionDisplay: 'JC'}]
HERE_DOC;
} else if ($_GET['id'] == 3) {
echo <<<HERE_DOC
[{optionValue:20, optionDisplay: 'Aidan'}, {optionValue:21, optionDisplay:'Russell'}]
HERE_DOC;
}?>
Note that this is not accessible. To ensure accessibility, the server side will handle the pre-population of the select boxes as the page is loaded. Here is an example (excluding the headers, footers and JavaScript) of the accessible example.
JSON Response
If I pass the server side id = 2, i.e. /select.php?id=2&ajax=true, the return value is (the ajax=true is an arbitrary flag that I’m using to differentiate between a normal user request and one done via AJAX):
[ {optionValue:10, optionDisplay: 'Remy'},
{optionValue:11, optionDisplay: 'Arif'},
{optionValue:12, optionDisplay: 'JC'}]
The enclosing square brackets denotes an array and each element is separated by a comma.
Within the array are three objects. If you’re familiar with PHP or Perl, you can basically treat these as hashes. The objects have keys (in this case two keys, one called ‘optionValue’ and one called ‘optionDisplay’), and values. Note that keys don’t need to be wrapped in quotes (though in some cases you will need them sometimes).
There are two ways which we can get the data out of this structure (assuming j is the structure):
alert(j['optionDisplay'])
Or:
alert(j.optionDisplay)
jQuery & AJAX Request
Our JavaScript is going to attach itself after the page is load, and fire an event each time the job function select box is changed.
The event will send the new value of the select box and reload the contents of the person select box.
Note that I’m be a bit naughty here, in that I’m plugging HTML directly in to the DOM.
Each item in the JSON response is looped round and used to build up the new options for the select box. As the response is an array (as mentioned earlier), we can call the .length method on it.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
}
$("select#ctlPerson").html(options);
})
})
})
</script>
Where to take it next
So that’s the primer. Next steps: upgrade, integrate, extend and stylise. Below is an example of the category selection when submitting an item for sale on Ebay.
It should be a simple next step to integrate a database behind the selection methods and create more complicated selection like this Ebay example.
Let me know if you spot any glaring errors or have any comments.
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%3D81321996.-%3B)
hi Sunil, did u find the solution of adding values to textarea??
HI All,
Please could anyone let me know how i should pass the value to my JQUERY.
see here what i want to do.
Here is the issue
{id: $(this).val(), ajax: 'true'}you guys have combo box or drop down so you get id of that and by id you could get the value for that controls. but we do have different scenario here like this<a href="?id=10" rel="nofollow">Click me</a>then how it will get the id from that and pass there in Ajax query string or how i should do because we have link there and on that link we are calling that and this links id is looping into while so everyone have diffrent. please if i m not clear then please reply me and please help us.Thanks to all of you.
[...] http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ [...]
Hi remy, I need your help!
I'm trying to use your script in a thickbox, thickbox created with jQuery and with thickbox.js. The "auto-change" of select didn't work...
How can I do it?!
Thank you very much!
Awesome tutorial, thanks
I'm using 2 tables vs. 1 like in your example. I have everything working but actually populating the 2nd dependent select. I've modeled my code after yours, just not sure how to get the data in there, can you tell me what needs to be done here:
<script src="/jquery/jquery-1.2.3.js" type="text/javascript"></script> <script src="select-chain.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(function () { var type = jQuery('#spType'); var sp = jQuery('#specie'); sp.selectChain({ target: specie, url: 'request_processor.cfm', type: 'post', data: { ajax: true } }); // note that we're assigning in reverse order // to allow the chaining change trigger to work type.selectChain({ target: sp, url: 'request_processor.cfm', type: 'post', data: { ajax: true } }).trigger('change'); }); </script> <cfset s = createObject("component","specie").gettypes()> <cfif not structisempty(form)> <cfelse> <form action=""> <select name="specie" id="spType"> <cfoutput query="s"> <option value="#s.typeid#">#s.type#</option> </cfoutput> </select> <select name="specie" id="specie"> <option></option> </select> </form> </cfif>Thanks for the tool, I hope to be able to put it to use one day!@HJ - you might want to check out the next version of this (the link at the top of the page) - it explains how to chain select boxes:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
I hope that (starts) to help.
Would love to see a mysql connection example using this.
Anyone done one who could share?
@Jimmy - I'm not trying to be funny here, but have you checked out the link at either the top of the page, or perhaps directly above your comment? It includes MySQL connections, queries, chained select boxes - the whole she-bang
[...] Auto-populating Select Boxes using jQuery & AJAX [...]
[...] Auto-populating Select Boxes using jQuery & AJAX (tags: jquery javascript) [...]
[...] 17. Auto-populating Select Boxes using jQuery & AJAX [...]
Thanks for a great article - saved me hours!
[...] Auto-populating select boxes using jQuery and Ajax - A key technique in Ajax applications is to populate content without a page refresh. [...]
[...] 17.自动填充选择框 使用jQuery&AJAX,无须刷新页面，自动填充内容 Auto-populating Select Boxes demo [...]
[...] 17. Auto-populating Select Boxes using jQuery & AJAX [...]
[...] Login Form15.Yazılar için Ajax efekti | Demosu burada.16.Form Tamamlayıcı | Demo burada 17.Auto-populating Select Boxes using jQuery & AJAX | Demo burada.18.Ajax Açılır Menü19.Ajax/PHP shoutbox20.Ajax Tab Menü21.How to Load In and [...]
[...] 17. Auto-populating Select Boxes using jQuery & AJAX: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ 18. Ajax Açılır Menü: http://www.webmonkey.com/tutorial/Build_an_Ajax_Dropdown_Menu 19. [...]
Quite useful indeed. Thanks for sharing.
[...] copyright: this article is copied from http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/, the copyright belongs to the author not [...]