Question

有没有办法在带有Form::select()的下拉列表选项中为选项添加HTML属性？

好吧，因为我需要这样的东西:(在option标签中添加不同的CSS类）

<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：我将类名存储在数据库的表中。

从docs，我看不到光明。我也看过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>

Answer 1

默认的Form::select()帮助器不支持您要求的内容，但您可以使用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>";
});

您可以根据需要将此新方法与其他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);

Answer 2

不再需要创建宏。从LaravelCollective 5.4中，您可以将第5个参数与所有选项的各个属性结合使用。

{{ Form::select('name', $list, null, ['id' => 'colored_stuffs'],
[1 => ['color' => 'blue'], 2 => ['color' => 'red'], 3 => ['color => 'yellow]) }}

您可以使用它来添加自定义数据 - *属性或标准属性，例如禁用。

Answer 3

您可以遍历该选项，然后使用其文本添加为类：

$('#colors option').each(function(){
  $(this).addClass($(this).text());
});

Answer 4

$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>

Answer 5

这很简单，只需确保使用课程作为第四 paramneter

$ yourArray = array（）; 使用{{Form :: select（＆＃39; cat_id＆＃39;，$ yourArray，＆＃39;＆＃39;，＆＃39; class＆＃39; =＆gt;＆＃39; form-control＆＃39 ]）}}

Laravel，为选择下拉列表中的选项添加不同的html属性

5 个答案: