Laravel通过javascript

Question

当我们在laravel中选择html时，我们将在下面添加代码并将数据库值作为选定项返回：

{{ $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

只需将select标记的值设置为从数据库中获取的值即可。像

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

Answer 2

在你的ajax请求中，你期望按照你的代码以json格式提供响应数据。

dataType: "json",

现在，如果您要查看this数据必须采用数组格式。

Array.map()

所以我想如果你要在控制台上查看，你会发现错误

Error: data.map is not a function

尝试使用jQuery的.map代替。 更改此代码块： 从：

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);
});

希望它有所帮助！