用于返回下拉值的 Laravel 表单验证答案

【问题标题】：Laravel form validation for returning dropdown values用于返回下拉值的 Laravel 表单验证
【发布时间】：2016-11-13 05:13:21
【问题描述】：

当验证失败时，我希望我的下拉列表中包含以前选择的值。我的下拉列表是从 javascript 填充的。验证不会验证此下拉框的值。

我的视图中的下拉列表

<div class="form-group">
  <label align="right" for="ItemID" class="control-label col-xs-2">Item :</label>
      <select class="col-md-5 input-sm" name="itemID" id="ItemID" >
         <option>  </option>             
      </select>
</div>

我用于加载值的 java 脚本

$(document).ready(function(){
     $('#Year').on('click',function(e){
        var year= e.target.value;
          $.getJSON('/xxxxx/xxx?year=' + year, function(data){

          $('#ItemID').empty();
           $.each(data,function(index, courses){
             $('#ItemID').append('<option value="'+courses[0].ID+'">'+courses[0].Code+'</option>');
           });
        }); 
      });
 });

我尝试使用 this tutorial 获取先前选择的值。

<select class="form-control" name="item" id="item">
<option disabled selected>Velg...</option>
@foreach ($items as $item)
    <option value="{{ $item->name }}" @if (old('item') == $item->name) selected="selected" @endif>{{ $item->name }}</option>
@endforeach
</select>

PS : 当我使用这种编码时，它返回的是 ID 值，而不是下拉框中的代码。

<div class="form-group">
    <label align="right" for="ActivityItemsID" class="control-label col-xs-2">Activity : </label>
       <select class="col-md-5 input-sm" name="ActivityItemsID" id="ActivityItemsID" >
          <option value="{{Input::old('ActivityItemsID')}}" > {{Input::old('ActivityItemsID')}}  </option>
              <option value=" "> </option>
       </select>
  </div>

但它不起作用。如何获取表单先前选择的值？

【问题讨论】：

标签： javascript validation laravel-5.2

【解决方案1】：

我相信您遇到的问题是您正在加载页面加载后通过 AJAX 选择的选项。

还有许多其他方法可以更好地做到这一点，但要尽可能多地重用您的代码，我只需将脚本推送到您的页脚，其中包含直接来自刀片模板的一些动态值，这样您就可以在您的ajax 回调。

@push('scripts')
$(document).ready(function(){

    function getItems(year) {
        $.getJSON('/xxxxx/xxx?year=' + year, function(data){
            $('#ItemID').empty();
            $.each(data,function(index, courses){

                $('<option value="'+courses[0].ID+'">'+courses[0].Code+'</option>').appendTo('#ItemID');

                // If the page has errors we use the old input to check for a match and select the element after the ajax request has run
                @if( count($errors) > 0)
                if( courses[0].ID == {{ old('ActivityItemsID') }} ) {
                    $('#ItemID').val( courses[0].ID );
                }
                @else
           });
        });
    }

    // Manually populate the dropdown if a year is selected, if this is a select box you should change on('click' to on('change'
    $('#Year').on('click',function(e){
        getItems(e.target.value);
    });

    // If the page loaded with errors, use the year from the input to prepopulate the dropdown
    @if (count($errors) > 0)
    getItems( {{ old('year')  }} );
    @endif
});
@endpush

这段代码做了很多假设，你必须确保字段名称是正确的等等。一般来说，如果我使用大量的 ajax 来加载动态表单数据，我将使用 Laravel 验证在客户端处理验证就像有人禁用 Javascript 时的后备方案一样，您可以在运行验证后代码的同时保留 DOM 的当前状态。

【讨论】：

【解决方案2】：

我只是在选择框中设置了旧值。

  <select id="subcategories" data-old="{{old('subcategories')}}" name="subcategories" class="form-control">
      <option value="0">Choose Sub-Category</option>
  </select>

然后在动态加载下拉列表的元素后，我只需检查 data-old 中的旧值以查看它是否存在，然后相应地设置下拉列表。

【讨论】：