Laravel 通过验证重新加载页面后,使用 Select2 的输入值不会保留
Laravel input value with Select2 not persisting after page reload from validation
我有一个 select 表单输入,如下所示:
<div class="form-group col-md-3 @if($errors->first('contas.0.banco')) has-error @endif">
{!! Form::label('contas[0][banco]', 'Nome do Banco') !!}
{{ Form::select('contas[0][banco]', [] , null , ['class' => 'form-control select-banco']) }}
<small class="text-danger">{{ $errors->first('contas.0.banco') }}</small>
</div>
这些值是空的,因为我正在加载 JavaScript,使用 Select2 插件,其中:
var arrayBancos = [
{ id: 'HSBC', codigo: '399', text: 'HSBC Bank Brasil', site: 'www.hsbc.com.br', mime: '.png' },
{ id: 'Santander', codigo: '033', text: 'Banco Santander', site: 'www.santander.com.br', mime: '.png' },
{ id: 'Citibank', codigo: '745', text: 'Banco Citibank', site: 'www.citibank.com.br', mime: '.jpg' }
];
$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
selectElement.select2({
data: arrayBancos,
language: 'pt-BR',
matcher: oldMatcher(matchStart),
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
templateResult: formatSelecaoBanco,
templateSelection: formatBanco,
dropdownCss: { 'min-width': '350px' }
});
});
如您所见,插件中添加了一些自定义设置(最重要的一个,搜索在 arrayBancos.id
、arrayBancos.codigo
和 arrayBancos.text
中查找匹配项) ,所以我用 Javascript 填充了 select 输入以使事情变得更容易。
一切正常,除了一件事:当页面来自验证并检测到无效输入时,该字段的值未被保留(其他所有都正常)。可能是因为 select 里面还没有选项值,所以不能设置,只有当 jQuery 被载入,插件初始化后才会有选项可用。
所以...有什么解决办法吗?也许在 HTML 上设置 <options>
并使用 data-*
属性转换为类似于上面的数组?
在下拉列表中设置选项后在页面加载时,您应该像这样设置它的值:
$(".select-banco").select2("val", "HSBC");
我有一个 select 表单输入,如下所示:
<div class="form-group col-md-3 @if($errors->first('contas.0.banco')) has-error @endif">
{!! Form::label('contas[0][banco]', 'Nome do Banco') !!}
{{ Form::select('contas[0][banco]', [] , null , ['class' => 'form-control select-banco']) }}
<small class="text-danger">{{ $errors->first('contas.0.banco') }}</small>
</div>
这些值是空的,因为我正在加载 JavaScript,使用 Select2 插件,其中:
var arrayBancos = [
{ id: 'HSBC', codigo: '399', text: 'HSBC Bank Brasil', site: 'www.hsbc.com.br', mime: '.png' },
{ id: 'Santander', codigo: '033', text: 'Banco Santander', site: 'www.santander.com.br', mime: '.png' },
{ id: 'Citibank', codigo: '745', text: 'Banco Citibank', site: 'www.citibank.com.br', mime: '.jpg' }
];
$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
selectElement.select2({
data: arrayBancos,
language: 'pt-BR',
matcher: oldMatcher(matchStart),
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
templateResult: formatSelecaoBanco,
templateSelection: formatBanco,
dropdownCss: { 'min-width': '350px' }
});
});
如您所见,插件中添加了一些自定义设置(最重要的一个,搜索在 arrayBancos.id
、arrayBancos.codigo
和 arrayBancos.text
中查找匹配项) ,所以我用 Javascript 填充了 select 输入以使事情变得更容易。
一切正常,除了一件事:当页面来自验证并检测到无效输入时,该字段的值未被保留(其他所有都正常)。可能是因为 select 里面还没有选项值,所以不能设置,只有当 jQuery 被载入,插件初始化后才会有选项可用。
所以...有什么解决办法吗?也许在 HTML 上设置 <options>
并使用 data-*
属性转换为类似于上面的数组?
在下拉列表中设置选项后在页面加载时,您应该像这样设置它的值:
$(".select-banco").select2("val", "HSBC");