[html-formfu] Modify the class tag for the options in select
elements
Ascii King
tech at swattermatter.com
Fri Aug 21 15:36:35 GMT 2009
Can I automatically populate the class tag in an option for a select
element that is built using a resultset?
I have checked the archives, but the closest I came was this code from
Carl Franks:
http://www.mail-archive.com/html-formfu@lists.scsys.co.uk/msg01569.html
I have a select element that is used to pick a category to display on
the form. It uses CSS and simply checks the class tag of an option and
displays the appropriate form elements based on what it finds.
- type: Select
name: expense_category
label: Expense Category
options:
- value:
label: Please select one ...
- value: 3
label: Accommodations
attributes:
class: switch-d
- value: 4
label: Air Ambulance
attributes:
class: switch-g
This works fine. My CSS code checks to see if the class is switch-d or
switch-g and displays the appropriate element. However, I want to pull
this data from a table in the database rather than hard code it. So, I
use this.
- type: Select
name: expense_category
label: Expense Category
empty_first: 1
model_config:
resultset: ExpenseCategory
id_column: expense_category_id
label_column: category
The value I want to put in the class I have stored in the database with
the expense_category record in a field named switch. (I can't see
anywhere else it can go!) But, I can't get that 'switch' field into an
option class. I tried variations on the following code without success:
- type: Select
name: expense_category
label: Expense Category
empty_first: 1
model_config:
resultset: ExpenseCategory
id_column: expense_category_id
label_column: category
attributes:
class: switch
My final output should have the class="switch-d" and class="switch-g" in
the options.
<div class="select label">
<label for="expense_category[1]">Expense Category</label>
<select name="expenditures_1.expense_category" id="expense_category[1]">
<option value=""></option>
<option value="3" class="switch-d">Accommodations</option>
<option value="4" class="switch-g">Air Ambulance</option>
</select>
</div>
Thanks.
More information about the HTML-FormFu
mailing list