For two select box

I have Type & Detail table. In Type table, there are Vegetables, Fruit, Juice, etc. When I choose Vegetables, there are Chinese cabbage, Artichoke, Bell pepper, Cauliflower, Malabar spinach, etc in Detail table. I want to build select box for both. Before I choose Type box and if there is no detail for type, I want to disable detail select box.

Under Vegetables Chinese cabbage, Artichoke, Bell pepper, Cauliflower, Malabar spinach,

Under Fruit Orange, Apple,

For Select Box {{ select("type",type,"using":['id','name'],'useEmpty':true,'emptyText':'Choose Type...','class':'form-control','onChange':'addDetail(id)') }} {{ select("type",detail,"using":['typeid','name'],'useEmpty':true,'emptyText':'Choose Detail...','class':'form-control','disabled':'disabled') }}

<script language="javascript"> function addDetail(id) { alert(id.value); } </script> Please help, thanks



17.8k

So you want two SELECT's; one of them (Detail) will have X options. Those options depend on the Type selected in the other SELECT, right? Then I think you need AJAX (maybe W3 is the faster to learn that: http://www.w3schools.com/ajax/default.ASP ). In the other hand, why do you not do a query in the controller that only returns from the database Type's that has, at least, 1 Detail? Then you wouldn't need to disable Detail SELECT.



29.1k
edited Jul '14

On how to build that with ajax and phalcon here's a good resource: https://github.com/phalcon/cphalcon/wiki/Dependent-Select-Dropdown