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

Question

当验证失败时，我希望我的下拉列表中包含先前选择的值。我的下拉列表是从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>

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

Answer 1

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

还有很多其他方法可以更好地完成这项工作，但是尽可能多地重用代码我只需要从您的刀片模板直接将脚本推送到页脚，并使用一些动态值，这样您就可以在ajax回调中访问old（）。

@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的当前状态。

Answer 2

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

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

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