Laravel,为选择下拉列表中的选项添加不同的html属性
Posted
技术标签:
【中文标题】Laravel,为选择下拉列表中的选项添加不同的html属性【英文标题】:Laravel, add different html attributes to the options in select drop-down Lists 【发布时间】:2015-04-24 16:29:30 【问题描述】:有没有办法使用刀片 Form::select()
将 html 属性添加到下拉选择中的选项?
好吧,因为我需要这样的东西:(将不同的 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:我将类名存储在数据库的表中。
从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>
【问题讨论】:
Laravel 中的Form::select()
方法不会做你想要的,但它可能扩展 Form
类来添加你想要的功能。问题是,你使用的是 Laravel 4 还是 5?
【参考方案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);
【讨论】:
我已经更新了问题以提供更多详细信息......但是,是的,这接近我所需要的。我会尝试实现它,但乍一看它似乎是一个不错的解决方案。谢谢 我已经用 Laravel 5 测试过它(默认情况下不包括HTML
辅助类,但可以通过 composer.json 轻松添加。它应该与 Laravel 4.x 一起工作而无需任何问题。您只需将Form::macro() ...
保存在某处,以便站点的其余部分可以访问它。大部分代码直接取自默认的Form::select()
方法,因此您应该不会有任何问题。跨度>
我应该把这个宏放在哪里?我尝试了应用程序提供程序和一个简单的帮助 php,但没有成功。
@Moha 这取决于;你使用的是哪个版本的 Laravel?
我使用的是 Laravel 5.4【参考方案2】:
不再需要创建宏。从 LaravelCollective 5.4 开始,您可以将第 5 个参数与所有选项的单个属性一起使用。
Form::select('name', $list, null, ['id' => 'colored_stuffs'],
[1 => ['color' => 'blue'], 2 => ['color' => 'red'], 3 => ['color' => 'yellow'])
您也可以使用它来添加自定义 data-* 属性或标准属性,例如禁用。
【讨论】:
【参考方案3】:您可以遍历该选项,然后使用其文本添加为类:
$('#colors option').each(function()
$(this).addClass($(this).text());
);
【讨论】:
是的,但是。抱歉(我需要编辑我的问题)。我试过了。它用词很好。但我忘了说 html 与类不同。抱歉,我会更新问题。 在这种情况下,您需要在创建选项元素时添加类。你是如何创建它们的?? 是的,这就是我想要做的(在创建选项元素时添加类)。但我看不到如何在该选择选项中包含该数据库字段($color),基于 laravel Form::select(); 好的,我会的。请允许我更新一下这个问题。谢谢【参考方案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>
【讨论】:
我已经更新了问题。 css 类名不应与文本名相同。 css 类来自数据库中的一个表。 我会 +1 来回答,但问题是 css 类是动态存储在数据库中的,我需要从数据库中获取它们,以及那些数据(数据库中的 css 类) 可能与选项中的文本有很大不同 任何格式,JSON,也许...类似于 "colored": "id": "1", "color": "red"。可能是…… 可能...但是,我更喜欢原生 laravel/php 解决方案。 对不起!我不知道laravel
。【参考方案5】:
很简单,只要确保使用class作为第四个参数
$yourArray = array();
使用
Form::select('cat_id', $yourArray,'',['class' => 'form-control'])
【讨论】:
以上是关于Laravel,为选择下拉列表中的选项添加不同的html属性的主要内容,如果未能解决你的问题,请参考以下文章
如果单击按钮,下拉列表选项会更改(VueJS 和 Laravel 6)
在 Laravel Jetstream 注册中添加填充的选择下拉列表
使用KnockoutJS中的选项绑定为下拉列表中的某些选项添加类