20 Jan

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

View: Auto-populate multiple select boxes

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.

See the demo in action

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.

Ebay Category Selection

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)

176 Responses to “Auto-populating Select Boxes using jQuery & AJAX”

Webmaster 38 » Blog Archive » Autopopulating Select Boxes at ajax scripts compound January 4th, 2008 at 3:45 am

[...] Autopopulating Select Boxes [...]
Large Balloon guy January 12th, 2008 at 7:33 pm

I will definitely use this on my site. Actually I was looking for a jQuery example to make a parts selecter, something like this http://welie.com/patterns/showPattern.php?patternID=parts-selector
stefan January 15th, 2008 at 2:58 pm

the following mistake will only occurr when the url is viewed with a Firefox-browser:

I guess you might be someone who simply knows the reason for the mistakes that occurrs on this site

may I ask you to take a "firefox-look" at my demo?

regards!
Stefan
Blog Author Remy Sharp January 15th, 2008 at 4:29 pm

@Stefan - the problem is that you're trying to set the 'index' property of an option element, which you can't do.

The option element already has an index property but it only supports 'getting' rather than 'setting'.

From your code, you're using this 'index' attribute for tracking. It should work again if either you move the index track off the DOM node, or if you call the property something different to index.
Sunil January 23rd, 2008 at 7:56 am

i want to multiple values from combo(select) and display in a text area

pl give me solution

thanks
Aria Rajasa January 26th, 2008 at 5:55 am

Thx! the script works great, but I am having problems displaying a non-standard characters like á, it just displays gibberish ? like icon.

Can anyone help me on how can I display it properly?

Owh I've use this to start the script:

changing the utf-8 to iso-8859-1 didn't solve the problem
Aria Rajasa January 26th, 2008 at 6:16 am

Solved it! I just convert the strings with iconv() before displaying them in the JSON file
Select Boxes: jQuery & AJAX | David Bisset: Web Designer, Coder, Wordpress Guru March 3rd, 2008 at 11:12 pm

[...] Auto-populating Select Boxes using jQuery & AJAX is a great tutorial on working with jQuery, Ajax, and JSON… with select boxes. I was able to recently complete some client functionality thanks to this. Tags: Ajax, jQuery [...]
Useful jQuery links - Night Dreaming (by Sudar) March 8th, 2008 at 7:51 am

[...] Auto-populating Select Boxes [...]
Top 100 AJAX 'form' related scripts for 2007 | Nobox Media March 14th, 2008 at 6:53 pm

[...] Autopopulating Select Boxes [...]
sam March 28th, 2008 at 9:25 am

hi Sunil, did u find the solution of adding values to textarea??
Anand April 3rd, 2008 at 10:07 pm
HI All,
Please could anyone let me know how i should pass the value to my JQUERY.

see here what i want to do.
```
$(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 += '' + j[i].optionDisplay + '';
      }
      $("select#ctlPerson").html(options);
    })
  })
})
```
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.
Por Onde Ando Blog » Pesquisa Inicial sobre JQuery April 4th, 2008 at 11:59 pm

[...] http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ [...]
Simone April 11th, 2008 at 9:38 am

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!
philip beel April 18th, 2008 at 9:51 am

Awesome tutorial, thanks

HJ April 22nd, 2008 at 1:08 pm

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!

Blog Author Remy Sharp April 22nd, 2008 at 1:17 pm

@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.
Jimmy April 23rd, 2008 at 12:54 pm

Would love to see a mysql connection example using this.
Anyone done one who could share?
Blog Author Remy Sharp April 23rd, 2008 at 1:42 pm

@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
Sage of Code » Blog Archive » jQuery|Drupal QRC May 20th, 2008 at 1:43 am

[...] Auto-populating Select Boxes using jQuery & AJAX [...]
links for 2008-06-02 « Object neo = neo Object June 2nd, 2008 at 11:31 pm

[...] Auto-populating Select Boxes using jQuery & AJAX (tags: jquery javascript) [...]
25 Excellent Ajax Techniques and Examples - Six Revisions June 3rd, 2008 at 3:59 am

[...] 17. Auto-populating Select Boxes using jQuery & AJAX [...]
Deacon June 3rd, 2008 at 10:15 am

Thanks for a great article - saved me hours!
25 Excellent Ajax Techniques and Examples :: john010117.com June 3rd, 2008 at 11:21 pm

[...] Auto-populating select boxes using jQuery and Ajax - A key technique in Ajax applications is to populate content without a page refresh. [...]
25个优秀的Ajax技术和实例 » Life is a struggle =.=！ June 5th, 2008 at 8:53 am

[...] 17.自动填充选择框使用jQuery&AJAX,无须刷新页面，自动填充内容 Auto-populating Select Boxes demo [...]
Reponere » Blog Archive » 25 Excellent Ajax Techniques and Examples June 6th, 2008 at 6:02 pm

[...] 17. Auto-populating Select Boxes using jQuery & AJAX [...]
0 n 8 = ? » Blog Archive » 25 Ajax Dersi June 16th, 2008 at 9:51 am

[...] 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 [...]
Serhat Yolaçan » 25 adet Ajax uygulamaları ve dersleri June 17th, 2008 at 10:31 pm

[...] 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. [...]
Carlos Martins June 18th, 2008 at 2:44 pm

Quite useful indeed. Thanks for sharing.
Auto-populating Select Boxes using jQuery & AJAX | JavaBeta July 3rd, 2008 at 8:03 am

[...] 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 [...]

Jeff Dierking July 14th, 2008 at 5:49 pm

I am attempting to use this for a multi value picker.

The values in the second select populated upon change, but the values seem to be "phantom" values.


$("select#Codes").change(function(){
	$.getJSON("jsonhandlers/getpaaasubcodes.cfm",{chapter: $(this).val()}, function(j){
	var options = '';
	for (var i = 0; i < j.length; i++) {
		options += '' + j[i].Description + '';
	}
	$("#SubCodes").html(options);
	$("#SubCodes option:first").attr('selected', 'selected');
	$("#SubCodes").removeAttr("disabled");
	});
});

When I add a function to display the values;


$(document).ready(function(){
	$("#SelectedCodes").change(onSelectChange);
	$("#SubCodes").change(onSelectChange);
});

function onSelectChange(){
    var selected = $("#SelectedCodes option:selected");
    var output = "";
    if(selected.val() != 0){
        alert ("You selected " + selected.val() + " with a text label of " + selected.text() + ".");
    }
}

When I select a value in the select box #SubCodes, I am presented with an alert that says:

You selected undefined with a text label of .

Any ideas?

Jeff Dierking July 15th, 2008 at 4:01 am

Quick question... What syntax highlighter are you using, or did you roll your own?
Jeff Dierking July 15th, 2008 at 4:41 am

By using the followng:

$('' + j[i].Code + '').appendTo($("#PAAAFuncCodes"));

I no longer experienced the undefineds.

I am writing up an article on what I did on my blog. http://jeff.dierking.name/2008/07/14/my-first-jquery-hack/
JQuery - Expand/Collapse and Autopopulating Select Boxes « Coldfusion Yummy Mummy July 17th, 2008 at 5:03 am

[...] Url for Auto-populating select boxes - http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ [...]
Pedro July 21st, 2008 at 5:31 pm

Can anyone provide a link to a working bug free version of the tutorial above for download - thanks
Blog Author Remy Sharp July 21st, 2008 at 5:34 pm

@Pedro - have you tried this link: http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/ - I know it's only mentioned once at the top, but it's the superseded version.

In addition, it might help if you could explain what bugs you're seeing, so that I can check it out myself and perhaps fix it.
Matty B August 8th, 2008 at 12:25 pm

Hi there, I was wondering if anybody could help me out. I have been working on a new website for the company I work for and got stuck when some JavaScript worked in Firefox but not Internet Explorer. By this I guess I am half way there but have done something wrong.

Now just to give you a run down on my JavaScripts, they are virtually non-existent but despite that I take in what I am told.

The website address I am working on is:
http://www.davidstanleyredfern.com/?new

You will see straight away that an error is given, this is the error I am having problems.

The error relates to the search box at the top, when you pick a country it automatically updates the region box, this works in Firefox but because of the error in Internet Explorer this does not.

You can see the modified JavaScript relating to jquery and the error by visiting:
http://www.davidstanleyredfern.com/scripts/search_box.js
Matty B August 8th, 2008 at 1:18 pm

I have fixed the issue, this is important for PHP programmers who think JavaScript works like PHP.

The following JSON works:
[{optionDisplay: 'Tiranë'}]

But this does not:
[{optionDisplay: 'Tiranë'},]

Unless you check to see if j[i] is an object or not like such:
var options = ''; for (var i = 0; i < j.length; i++) { if (typeof j[i] == 'object') { options += '' + j[i].optionDisplay + ''; } }
“The Complete Guide” for jQuery Developer- Reblog « Dynamic Disruption August 19th, 2008 at 2:41 am

[...] Auto-populating Select Boxes using jQuery & AJAXLearn how to select a category and autopopulate subcategories with jQuery. [...]
mr.g August 19th, 2008 at 2:17 pm

i have copied the example, but the ctlPerson list menu doesn't update???

is there any reason for this?

thanks
Rick August 26th, 2008 at 11:26 am

Thanks for this fantastic script. I've managed to get it fully working as a tool to allow a user to select their county/state and then it will pull a list of towns from a MySQL db and show them in the city/town list.

Thanks again for your great work!
25 Excellent Ajax Techniques and Examples « Jonsunhee’s Weblog August 29th, 2008 at 8:00 am

[...] 17. Auto-populating Select Boxes using jQuery & AJAX [...]
51+ JQuery Tutorials and Examples at expertzweb September 1st, 2008 at 6:24 pm

[...] Auto-populating Select Boxes using jQuery & AJAX- Allow the user to select a top level category from one select box and to automatically populate the sub-category using jQuery and Ajax. [...]
Will September 13th, 2008 at 11:34 pm

This is very interesting, thanks for posting! Is there a way to have the php script echo out the html for the select options and not use JSON?
nas September 28th, 2008 at 8:01 am

hi guys,

anyone knows how to pass a string instead of an integer to the php page?

thanks.
Mitja September 30th, 2008 at 11:36 am

Can someone paste whole code or example how to use it with mysql.

Thx
Blog Author Remy Sharp September 30th, 2008 at 11:39 am

@Mitja - here you go: http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
Gabriel September 30th, 2008 at 7:53 pm

this was very handy dude, thanks.
Pete October 1st, 2008 at 2:52 am

Remy, I notice you have a comment in the source that says:
* Aug 22, 2007 - Added option to set target options when the page loads (you may have a default value selected in the primary select that you want to "preload" options in your target)

Does that mean I can set a value that shows as "selected" in the list? Can you give me an example of the syntax for this? I'd like to return the list with a value already selected.
Marty October 2nd, 2008 at 2:26 pm

How would this code be altered to make the secondary selects be disabled until the selects before them are changed? Something like:
Please select first
Waiting for input above
Waiting for input above