Laravel - если в выпадающем списке изменения произошел сбой

Question

В моем проекте Laravel -5.8 я пытаюсь загрузить текстовое поле на основе раскрывающегося списка при изменении значения:

Просмотр

<form  action="{{route('sports.store')}}" method="post" class="form-horizontal" enctype="multipart/form-data">
  {{csrf_field()}}
  <div class="card-body">
    <div class="form-body">
      <div class="row">
        <div class="col-12 col-sm-6">
          <div class="form-group">
            <label class="control-label"> Sport Type:<span style="color:red;">*</span></label>
            <select id="sport_type" class="form-control @error('sport_type_id') is-invalid @enderror" name="sport_type_id">
              <option value="">Select Sport Type</option>
              @foreach ($categories as $category)
                @unless($category->name === 'Joggings')
                  <option hidden value="{{ $category->id }}" {{ $category->id == old('sport_type_id') ? 'selected' : '' }}>{{ $category->name }}</option>
                  @if ($category->children)
                    @foreach ($category->children as $child)
                      @unless($child->name === 'Joggings')
                        <option value="{{ $child->id }}" {{ $child->id == old('sport_type_id') ? 'selected' : '' }}>&nbsp;&nbsp;{{ $child->name }}</option>
                      @endunless
                    @endforeach
                  @endif
                @endunless
              @endforeach
            </select>
          </div>
        </div>    
        <input type="hidden" id="max_score" class="form-control">
        <div class="col-12 col-sm-6">
          <div class="form-group">
            <label class="control-label"> Score:<span style="color:red;">*</span></label>
            <input type="number" name="score" id="total_score" value="{{ old('score', $sport->score) }}" placeholder="Enter score here" class="form-control @error('score') is-invalid @enderror">
          </div>
        </div>  
      </div>
    </div>
  </div>          
  <!-- /.card-body -->
  <div class="card-footer">
    <button type="submit" class="btn btn-primary">{{ trans('global.save') }}</button>
  </div>           
</form>

<script type="text/javascript">
$(document).ready(function() {
  $(document).on('change', '#sport_type', function() {
    var air_id =  $(this).val();
    var a = $(this).parent();
    var op = "";
    var inputweight = $('input[name="score"]');      

    $.ajax({
      type: 'get',
      url: '{{ route('get.scores.all') }}',
      data: { 'id': air_id },
      dataType: 'json',      //return data will be json
      success: function(data) {
        console.log(data.maxscore);
        $('#max_score').val(data.maxscore);

        if ($.trim($('option:selected', this).text()) == 'wrestling') {
          inputweight.prop('readonly', true);
          $('#total_score').val(data.maxscore);
        } else {
          inputweight.prop('readonly', false);
        }                
      },
      error: function() { }
    });
  });
});
</script>

В jQuery выше, я хочу загрузить

val(data.maxscore)

в

#total_score

, то есть

$('#total_score').val(data.maxscore);

но я обнаружил, что он не работает. Ничего не отображается.

Сначала я думал, что условие не соответствует действительности, но когда я подтвердил, я увидел, что оно верно Кроме того, когда я удаляю оператор if, он загружает

$('#total_score').val(data.maxscore);

Как мне решить эту проблему?

Спасибо

Answer 1

Кажется, что ошибка возникает из-за неправильного контекста переменной this внутри success обратного вызова. Старайтесь не использовать его, например, так:

if ($.trim($('#sport_type option:selected').text()) == 'wrestling') {
    ...
} else {
    ...
}