I'm trying to use the dvisionfactory related select form plugin to display categories with dependent subcategories in select boxes in a form. I think I'm very close, but I can't quite get it to work. This is my view:
<%= collection_select(:category, :id, @category, :id, :title) %>
<%= related_collection_select(:subcategory, :id, [:category, :id], @subcategory, :id, :title, :parent_id) %>
Which renders this in the HTML page source:
<select id="category_id" name="category[id]"><option value="72">Accommodation and Food Services</option> <option value="56">Administrative and Support and Waste Management and Remediation Services</option>
<option value="11">Agriculture, Forestry, Fishing and Hunting</
</select>
<script type="text/javascript"> //<![CDATA[
var HTMLRelatedSelectStruct = { select_children: undefined, select_parent: undefined, relation_hash: undefined, extended_html_select_object: true, select: function(value) { for (i=0; i < this.options.length; i++) { if (this.options[i].value == value) this.selectedIndex = i; } this.refresh_children(); }, child_add: function(child) { if (this.select_children == undefined) this.select_children = ; this.select_children.push(child); }, refresh_children: function() { if (this.select_children != undefined) { this.select_children.each( function(child) { child.refresh(); } ); } }, refresh: function() { this.options.length = 0; if (this.select_parent != undefined && this.relation_hash != undefined && this.select_parent.selectedIndex > -1) { opts = this.relation_hash[this.select_parent.options[this.select_parent.selectedIndex].value]; if (opts != undefined) { for (i=0; i<opts.length; i++) this.options[i] = opts[i]; this.refresh_children(); } } }, onchange: function() { this.refresh_children(); } };
//]]> </script><select id="subcategory_id" name="subcategory[id]"></
<script type="text/javascript">
//<![CDATA[
if ($('category_id').extended_html_select_object != true) Object.extend($('category_id'), HTMLRelatedSelectStruct); if ($('subcategory_id').extended_html_select_object != true) Object.extend($('subcategory_id'), HTMLRelatedSelectStruct); $('category_id').child_add($('subcategory_id')); $ ('subcategory_id').select_parent = $('category_id'); $('subcategory_id').relation_hash = { 11: [new Option('Animal Production', '112'), new Option('Crop Production', '111'), new Option('Fishing, Hunting and Trapping', '114'), new Option('Forestry and Logging', '113'), new Option('Support Activities for Agriculture and Forestry', '115')], 56: [new Option('Administrative and Support Services', '561'), new Option('Waste Management and Remediation Services', '562')], 72: [new Option('Accommodation', '721'), new Option('Food Services and Drinking Places', '722')] };
//]]> </script><script type="text/javascript"> //<![CDATA[ $('category_id').select(''); $ ('subcategory_id').select('38515660'); //]]> </script>
This page source looks OK to me, the categories and subcategories are right. The problem is that there is nothing in the subcategory select box on the screen, whether I select a value in the category box or not. I don't have much javascript experience so this is driving me crazy.
Any help appreciated.