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回调中。

@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加载动态表单数据，我将处理验证如果有人禁用Javascript，那么客户端使用Laravel验证就像一个后备，这样你就可以在保留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中的旧值以查看其是否存在，然后相应地设置下拉列表。

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

2 个答案: