Brought to you by Colin Mollenhour and Scriptaculous/Prototype

Updated November 11, 2008!


So I decided to write a double-combo class in the Scriptaculous style, and wanted something versatile and more importantly, able to handle any number of dependent selects.
To create an Ajax driven "DoubleCombo", simply call

  new Ajax.DoubleCombo('master_select_id','slave_select_id','pageurl');
and you have a select that will fill the "slave" select via Ajax and JSON.

Live Demo:

On the server side, get the "id" and "selectedIndex" or "value" and build an array as specified below, json_encode() it and send it back.

$value $_POST['value']; //the sendValue option must be enabled
$index $_POST['selectedIndex'];
$result getResult($id,$value); //get options here with id, value, and/or selectedIndex
$options = Array(
'selectedIndex' => 0/* could also be 'selected' => '0' */
'options' => Array(
'value' =>  '0''text' => 'Please select something...')
$person fetchAssoc($result) ){
'value' => $person['person_id'], 'text' => $person['name']));

To extend to another level just add a new select in your html and call new Ajax.DoubleCombo again!
You may notice some strange behaviour with these select boxes, it is all on purpose to demonstrate the various capabilities.

Feel free to email me with questions, suggestions, bugs, etc..

Javascript source code here.
Server-side PHP source code used in this example here.
View the source of this page to see how it is used


paramName:'selectedIndex'This determines what the POST will send as the identifier for the selected id.
parameters:''Additional parameters to pass to the Ajax.Request call
sendValue:falseIf true, "value=options[selectedIndex].value" will be sent in the POST
voidValue:nullCan be a single value or an array of values. These values will be ignored in the onChange behaviour.
voidIndex:nullCan be a single index or an array of indeces. These indeces will be ignored in the onChange behaviour.
clearSlaves:trueWhen a value is changed, each slave (recursively) will be disabled and set to it's "disabledText"
clearSlavesOnCreate:trueSet to false to avoid clearing the slaves on creation of the Ajax.DoubleCombo option.
highlightColor:'#FFFF99'The slave will automatically be highlighted this color upon completion.
highlightEndColor:'#FFFFFF'The end color for the highlight effect.
disabledText:'---'The text that will be displayed when the select is disabled.
fetchingText:'Fetching options...'The text that will be displayed while waiting for the Ajax response.
ajaxOptions:{}Additional options to be sent to Ajax.Request() on onChange event
new Effect.Highlight(...);
this.slave.focus(); }
Simply highlights the slave select and gives it focus (immediate keyboard focus)
onLoading:function(){}Additional actions to take while loading...
alert("Error while fetching
options from server."); }
The default behaviour on a failure. Use transport.responseText to get response.
onVoid:function(){}Additional actions to take if a void value is selected

Custom Events: (use Element#fire to trigger):


Opera doesn't correctly select the default value when using voidValue. Update, this was on a very old version of Opera, this is probably fixed by now.