Easy chained select using jQuery

Whilst working on Project Trackr, I had the need to be able to easily add chained selects within a form, more specifically, I wanted selecting an account or a client from a drop down list to load another drop down list beneath it with users in that account. An easy way to do this would be to register a listener on a given ID, when something in that dropdown is selected, fire an AJAX event and then load the response contents into a pre specified div. Easy enough and it works, but I wasn’t satisfied.

I wanted a solution which was a simple as adding a class to the first drop down, that’s it. A couple of minutes later, I had a working solution, and I find it to be very useful, so thought I would share it with you.

This was a quick and dirty solution to my specific problem. In my case, I don’t need to worry about this not working when JavaScript is disabled. If you need to worry about such things, Paul Norman suggested how this might work in the comments

The solution is made up of 3 parts, the HTML, JavaScript and the PHP, which I will now go through one at a time.

The HTML

There is absolutely nothing fancy here, at all, so much so, that I’ve decided to not bother with the rest of the form/HTML page and just show the relevant field.

<p>
	<label for="form_client">Client</label>
	<?php echo form_error('client_id')?>
	<?php echo HTML::client_dropdown($clients, false, array('class'=>'chain_user'))?>
</p>

A couple of quick points here, I wrap each form field, label and error (not shown here) in a set of paragraph tags, which allows me to style them using CSS. The client_dropdown function returns a select element containing the clients passed in. This results in something like

<select class="chain_user" id="form_client">
	<option></option>
	<option value="1">Account 1</option>
	<option value="2">Account 2</option>
	<option value="3">Account 3</option>
	<option value="4">Account 4</option>
	<option value="5">Account 5</option>
	<option value="6">Account 6</option>
</select>

The Javascript

I’m a huge fan of jQuery, so obviously that’s what I’m using here. The code itself is well commented, so it should be pretty self explanatory

var SITE_URL	= 'http://localhost/project/';
var LOADING		= '<img src="'+SITE_URL+'images/loading.gif" class="loading" />';

$(document).ready(function() {
	/**
	 * Listen out for chain events
	 * In this case, any select which has a class "chain_user"
	 * It will load a dropdown with all the users in that account beneath it
	 */
	$('select.chain_user').change(function() {
		// First, we need the account ID
		// Leave now if this is not set (They selected the empty item at the top)
		var account_id = $(this).val();
		if(account_id == '') return false;

		// Initialise any objects we need now or later
		// Create these now as $(this) will not be the real this in the response
		var parent = $(this).parent();
		var next = parent.next();

		// We need to put a loading gif in place of where the users drop down will be
		// We need to make sure we don't already have an AJAX loaded dropdown
		// otherwise we could end up with several - Disaster!
		if(next.hasClass('loaded-via-ajax')) {
			next.html(LOADING+' Loading users');
		} else {
			var p = new jQuery('<p class="loaded-via-ajax">'+LOADING+' Loading users</p>');
			parent.after(p);
			// We need to update what "next" is so that it works within the AJAX response
			next = parent.next();
		}

		// Now use AJAX to fetch a dropdown with all the users
		$.ajax({
			type: 'GET',
			url: SITE_URL+'account/ajax/get_users_dropdown/'+account_id,
			success: function(response) {
				next.html(response);
			}
		});
	});
});

The PHP

I’ve used PHP here, but you could use any server side language you want here. The code which gets called by the AJAX function is

$account = new Account_model($account_id);
$users = $account->get_users();

// We also need spit out a label
echo '<label for="form_user">User</label>';
echo HTML::user_dropdown($users);

The user_dropdown function is similar to the client_dropdown function I used to generate the first dropdown and is shown below

public static function user_dropdown($users, $selected = false, $attributes = array()) {
	// Merge the incoming attributes with the defaults
	$defaults = array(
		'name'=>'user_id',
		'title'=>'Select the user from this list',
		'id'=>'form_user'
	);
	$attributes = array_merge($defaults, $attributes);

	// Take care of any attributes we have
	$tmp = '';
	foreach($attributes as $key=>$value) {
		$tmp.= ' '.$key.'="'.$value.'"';
	}

	// Build up the select item
	$str = '<select'.$tmp.'>';
	foreach($users as $user) {
		$str.= '<option value="'.$user->id.'"'.($selected == $user->id ? ' selected="selected"' : '').'>'.$user->first_name.' '.$user->last_name.'</option>';
	}
	$str.= '</select>';
	return $str;
}

And that’s all there is to it! I hope you find this useful