Is there a way to add HTML attributes to an option in a dropdown select with blade Form::select()
?
Well, because I need something like this: (add different CSS classes to the option
tags)
<select id="colors" name="colors">
<option value="1" class="blue">blue</option>
<option value="2" class="red">red</option>
<option value="3" class="yellow">yellow</option>
</select>
UPDATE (The CSS class name should not be the same as the text name. The css classes comes from a table in the database.)
<select id="colors" name="colors">
<option value="1" class="blue">colors-blue</option>
<option value="2" class="red">something-red</option>
<option value="3" class="yellow">banana is yellow</option>
</select>
If it was just one CSS class to add to all those options, I could simply do that with jQuery. But I need to add more than one.
PS: I have the classes name stored in an table from the database.
From the docs, I can't see no light. I've looked to the API also.
Update 2 (Giving some more details of the code)
// In my create view I have this:
{{ Form::select( 'colored_stuffs', $colorsList, null, ['id'=>'colored_stuffs'] ) }}
// The $colorsList generate an array in the ColorsController@create
public function getCreate()
{
$colorsList = $this->colors->listAll();
}
// listAll() is defined here is this repository
public function listAll()
{
$colors = $this->model->lists('name', 'id', 'color_class');
return $colors;
}
// the HTML optput of the create view it's this
<select id="colored_stuffs" name="colored_stuffs">
<option value="1">Red is used to alert something</option>
<option value="2">A banana is yellow</option>
<option value="3">Sorry no color here</option>
</select>
// But I want this
<select id="colored_stuffs" name="colored_stuffs">
<option value="1" class="red">Red is used to alert something</option>
<option value="2" class="light-yellow">A banana is yellow</option>
<option value="3" class="black">Sorry no color here</option>
</select>
The default Form::select()
helper will does not support what you're requesting, but you can add additional Form helpers using a Macro:
Form::macro('fancySelect', function($name, $list = array(), $selected = null, $options = array())
{
$selected = $this->getValueAttribute($name, $selected);
$options['id'] = $this->getIdAttribute($name, $options);
if ( ! isset($options['name'])) $options['name'] = $name;
$html = array();
foreach ($list as $list_el)
{
$selectedAttribute = $this->getSelectedValue($list_el['value'], $selected);
$option_attr = array('value' => e($list_el['value']), 'selected' => $selectedAttribute, 'class' => $list_el['class']);
$html[] = '<option'.$this->html->attributes($option_attr).'>'.e($list_el['display']).'</option>';
}
$options = $this->html->attributes($options);
$list = implode('', $html);
return "<select{$options}>{$list}</select>";
});
You can use this new method with the additional class
as required:
$options = [
[
'value' => 'value-1',
'display' => 'display-1',
'class' => 'class-1'
],
[
'value' => 'value-2',
'display' => 'display-2',
'class' => 'class-2'
],
[
'value' => 'value-3',
'display' => 'display-3',
'class' => 'class-3'
],
];
echo Form::fancySelect('fancy-select', $options);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With