选择具有 2 个空选项值的输入

Posted

技术标签:

【中文标题】选择具有 2 个空选项值的输入【英文标题】:Select input with 2 empty option values 【发布时间】:2019-05-08 05:17:22 【问题描述】:

在我的 laravel 5.7/mysql 5 应用程序中,我的投票表和我定义的模型中有布尔 is_quiz 字段:

protected $casts = [
    'is_quiz' => 'boolean',
];
...

以及用于使用此字段的可能值/键的数组

private static $voteIsQuizLabelValueArray = Array(1 => 'Is Quiz', 0 => 'Is Not Quiz');

在控件中,我为空选择器添加空值:

$viewParamsArray['voteIsQuizValueArray']         = $this->SetArrayHeader(['' => ' -Select Is Quiz- '], Vote::getVoteIsQuizValueArray(false));

这个数组有值:

$viewParamsArray['voteIsQuizValueArray']::Array
(
    [] =>  -Select Is Quiz- 
    [1] => Is Quiz
    [0] => Is Not Quiz
)

在我的表单中,这个数组为:

 Form::select('is_quiz', $voteIsQuizValueArray, isset($vote->is_quiz) ? $vote->is_quiz : '', [ "id"=>"is_quiz", "class"=>"form-control editable_field select_input " ] ) 

在呈现的 html-source 中,我看到选择了 2 个选项:

<select id="is_quiz" class="form-control editable_field select_input valid" name="is_quiz" aria-invalid="false" aria-describedby="is_quiz-error"><option value="" selected="selected"> -Select Is Quiz- </option><option value="1">Is Quiz</option><option value="0" selected="">Is Not Quiz</option></select>

validator.w3.org 在这里提出了错误。 我看到语法错误的原因是什么,但我不知道有没有简单的方法来修复它?

谢谢!

【问题讨论】:

自 laravel 5 以来不推荐使用表单构建器。尝试使用刀片构建您的选择 你是对的。我已经使用这个库好几年了,认为它非常有用,并没有注意到不再支持它。有没有类似的替代品?另外,对于我的问题,我的模型和 laravel-form-b​​uilder 插件可以做出任何简单的决定吗?那是现场项目。 据我所知,您可以使用packagist.org/packages/laravelcollective/html 构建表单。但我不太清楚,可能这里也存在复制selected 的问题。但是,我建议您通过使用 @foreach@if 的刀片自己构建您的选择 【参考方案1】:

表单构建器自 Laravel 5 起已弃用

Why are Form and HTML helpers deprecated in Laravel 5.x?

作为您可以尝试使用 Laravel Collective 的选项之一

https://packagist.org/packages/laravelcollective/html

但 IMO 最好的决定是通过刀片构建选择:

<select id="is_quiz" 
    class="form-control editable_field select_input valid" 
    name="is_quiz" 
    aria-invalid="false"
    aria-describedby="is_quiz-error"
>
    @foreach ($voteIsQuizValueArray as $k => $v)
            <option 
                    value=" $k " 
                    @if( $k === old('is_quiz', '') ) selected="selected" @endif
            > $v </option>
    @endforeach
</select>

【讨论】:

以上是关于选择具有 2 个空选项值的输入的主要内容,如果未能解决你的问题,请参考以下文章

如何在具有 null 值的 Angular 选择元素上使用默认的“请选择”选项进行验证?

选择具有 MAX 值的记录

Javascript将具有多个值的选定选项从一个列表移动到另一个列表

如何在输入字段中使用选择选项的当前值

具有非常大的选项列表的 React Select

具有默认值的选项的javascript设计模式?