<?xml version="1.0"?>
<record><wiki id="wiki?page_id=90">
	<page_name>Dynamic_select_boxes</page_name>
	<page_id>90</page_id>
	<page_title></page_title>
	<content>==Dynamic select boxes==

To create two select boxes whose one is dependent (slave) of the other (master), we need to use some javascript with Jason.

Create the valuelists.ini:
&lt;code&gt;

;valuelist for the slave
[slaves_list]
__sql__ = &quot;select slave_id, slave_name, master_id from slaves&quot;

; valuelist for the masters
[masters_list]
__sql__ = &quot;select master_id,master_name from masters&quot;
&lt;/code&gt;

fields.ini:
&lt;code&gt;
[master]
vocabulary=masters_list

[slave]
vocabulary=slaves_list
&lt;/code&gt;

delegate class in the table directory :
&lt;code&gt;
...
function block__after_new_record_form(){
echo &lt;&lt;&lt;END
&lt;script language=&quot;javascript&quot;&gt;&lt;!--
var slave_field= document.getElementById(&apos;slave&apos;);
var master_field = document.getElementById(&apos;master&apos;);
END;
// Let&apos;s get all the slaves available.
$app =&amp; Dataface_Application::getInstance();
$query =&amp; $app-&gt;getQuery();
$table =&amp; Dataface_Table::loadTable($query[&apos;-table&apos;]);
$slaves = $table-&gt;getValuelist(&apos;slaves_list&apos;);
$slave_masters = $table-&gt;getValuelist(&apos;slaves_list__meta&apos;);
// Note that the slaves_list__meta valuelist is automatically created
// because we had three columns in the slaves valuelist.
// The first and third columns effectively create a 2nd valuelist
// named &apos;slaves_list__meta&apos;

// $slaves is an array with keys slave_id and values slave_name
// slave_masters is an array with keys slave_id and values master_id

import(&apos;Services/JSON.php&apos;);
$json =&amp; new Services_JSON(); // A JSON encoder to allow us to easily
// convert PHP arrays to javascript arrays.
echo &apos;
var slaves_options = &apos;.$json-&gt;encode($slaves).&apos;;
var slaves_master = &apos;.$json-&gt;encode($slave_masters).&apos;;
&apos;;

echo &lt;&lt;&lt;END
master_field.onchange = function(){
var selected_master = master_field.options[master_field.selectedIndex].value;
slave_field.options.length = 0;
var index = 0;
for ( slave_id in slaves_options){
if ( selected_master == slaves_master[slave_id] ){
slave_field.options[index++] = new Option(slaves_options[slave_id], slave_id);
}
}
};
//--&gt;&lt;/script&gt;
END;
}

// Also place this javascript after an edit record form...
function block__after_edit_record_form(){
return $this-&gt;block__after_new_record_form();
}


&lt;/code&gt; 

The 2.0 version has a [http://xataface.com/dox/modules/depselect/latest| depselect module] to produce cascading dynamic select boxes very simply.</content>
	<keywords></keywords>
	<language>en</language>
	<original_page></original_page>
</wiki></record>