Есть ли способ добавить атрибуты HTML к опции в выпадающем списке с помощью Form::select() ?
Ну, потому что мне нужно что-то вроде этого: (добавьте разные классы CSS в теги option )
<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 (Имя класса CSS не должно совпадать с текстовым именем. Классы css берутся из таблицы в базе данных.)
<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>
Если бы только один класс CSS добавлял ко всем этим параметрам, я мог бы просто сделать это с помощью jQuery. Но мне нужно добавить несколько.
PS: У меня есть имя классов, хранящееся в таблице из базы данных.
Из документов я не вижу света. Я также посмотрел на API.
Обновление 2 (Предоставление некоторых дополнительных сведений о коде)
// 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>
Помощник по умолчанию Form::select() не поддерживает то, что вы запрашиваете, но вы можете добавить дополнительные помощники формы с помощью макроса :
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>"; });
Вы можете использовать этот новый метод с дополнительным class мере необходимости:
$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);
Создание макроса больше не требуется. Из LaravelCollective 5.4 вы можете использовать 5-й аргумент с отдельными атрибутами для всех параметров.
{{ Form::select('name', $list, null, ['id'=>'colored_stuffs'], [1 => ['color' => 'blue'], 2 => ['color' => 'red'], 3 => ['color => 'yellow]) }}
Вы можете использовать его для добавления пользовательских атрибутов data- * или стандартных свойств, таких как отключенные.
Вы можете выполнить итерацию по опции, а затем использовать свой текст для добавления в качестве класса:
$('#colors option').each(function(){ $(this).addClass($(this).text()); });
$colors = array("green","blue","red"); echo '<select id="colors" name="colors">'; foreach($colors as $key => $color) { echo '<option value="'.$key+1.'" class="'.$color.'">'.$color.'</option>'; } echo '</select>';
Обновить
$('#colors option').each(function(){ color = $(this).text().split("-")[1]; $(this).addClass(color); });
$('#colors option').each(function(){ color = $(this).text().split("-")[1]; $(this).addClass(color); });
.blue{ color:blue; } .yellow{ color:yellow; } .red{ color:red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select id="colors" name="colors"> <option value="1">colors-blue</option> <option value="2">something-red</option> <option value="3">banana-yellow</option> </select>