Laravel выбрал предмет по javascript

Question

Когда у нас есть выбор HTML в laravel, мы добавим код ниже, и он возвращает значение базы данных как выбранный элемент:

{{ $category->id == $product->category_id ? 'selected' : '' }}

как:

<select class="form-control" name="category_id">
  @foreach($categories as $category)
    <option value="{{ $category->id }}" {{ $category->id == $product->category_id ? 'selected' : '' }}>{{ $category->title }}</option>
  @endforeach
</select>

Это прекрасно, если мы используем html select, но сейчас я использую ajax select и возвращаю данные, и я не могу получить то, что установлено в базе данных, как выбранный вариант.

вот мои коды:

html

<div class="mt-20">
  {{ Form::label('category_id', 'Category') }}
  <select class="form-control" name="category_id">
     <option value="">Select Category</option>
       @foreach($categories as $category)
         <option value="{{ $category->id }}" {{ $category->id == $product->category_id ? 'selected' : '' }}>{{ $category->title }}</option>
       @endforeach
  </select>
</div>

<!-- sub category -->
<div class="mt-20">
  {{ Form::label('subcategory_id', 'Sub Category') }}
  <select class="form-control" name="subcategory_id">
    <option value="">Select Sub Category</option>
  </select>
</div>

javascripts

<!-- subcategory -->
<script>
  jQuery( document ).ready( function( $ ) {
    $('select[name="category_id"]').on('change', function() {
      $.ajaxSetup({
          headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
      });
       var CategoryId = $(this).val();
        if(CategoryId) {
            $.ajax({
              url: '{{ url('admin/subcategorylists') }}/'+encodeURI(CategoryId),
              type: "GET",
              dataType: "json",
              success:function(data) {
                $('select[name="subcategory_id"]').empty();
                var options = data.map(function(state) {
                    return $("<option class='form-control'>").val(state.id)
                                        .text(state.title);
                });
                $('select[name="subcategory_id"]').empty().append(options);
              }
            });
        }else{
          $('select[name="subcategory_id"]').empty().append("<option class='form-control' value='' selected>Select</option>");
        }
    });
  });
</script>

Вопрос

1. Поскольку мои коды находятся на странице редактирования, мне нужно выбрать свою подкатегорию with default selected option (это значение, сохраненное в базе данных), как мне это сделать?

Answer 1

По вашему запросу ajax вы ожидаете ответные данные в формате json согласно вашему коду.

dataType: "json",

Теперь, если вы собираетесь увидеть , эти данные должны быть в формате массива.

Array.map()

Так что, думаю, если вы посмотрите на консоль, вы заметите ошибку

Error: data.map is not a function

Попробуйте вместо этого использовать .map из jQuery. изменить этот блок кода: От:

var options = data.map(function(state) {
    return $("<option class='form-control'>").val(state.id)
                        .text(state.title);
});

Кому:

var options = $.map(data, function(state) {
    return $("<option class='form-control'>").val(state.id)
                        .text(state.title);
});

Надеюсь, это поможет!

Answer 2

Просто установите значение тега select на то, что вы получаете из базы данных. Как

$('select[name="subcategory_id"]').val("yourValue");