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.
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.
<?php
$id = $_POST['id'];
$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(
Array('value' => '0', 'text' => 'Please select something...')
)
);
while( $person = fetchAssoc($result) ){
array_push($options['options'],
Array('value' => $person['person_id'], 'text' => $person['name']));
print json_encode(unescape($options));
?>
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
| option | default | description |
|---|---|---|
| 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: | false | If true, "value=options[selectedIndex].value" will be sent in the POST |
| voidValue: | null | Can be a single value or an array of values. These values will be ignored in the onChange behaviour. |
| voidIndex: | null | Can be a single index or an array of indeces. These indeces will be ignored in the onChange behaviour. |
| clearSlaves: | true | When a value is changed, each slave (recursively) will be disabled and set to it's "disabledText" |
| clearSlavesOnCreate: | true | Set 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 |
| onComplete: | function(res){ 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... |
| onFailure: | function(transport){ 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 |