在Ajax和Laravel的帮助下根据其他选择标签更新选项选择属性？答案

【问题标题】：Update options select attributes according to the other select tag with the help of Ajax and Laravel?在Ajax和Laravel的帮助下根据其他选择标签更新选项选择属性？
【发布时间】：2017-01-26 10:49:24
【问题描述】：

我有选择标签和一系列选项选择属性，它们的值和内部文本存储在数据库中。

这是我在视图上显示数据的方式，通过为每个选择标签调用一个 foreach，总共 2 个：

{!! Form::label('category_id', 'Category:') !!}
<select class="form-control category_id" name="category_id">
    @foreach($categories as $category)
        <option value='{{ $category->id }}'> {{ $category->name }}</option>
    @endforeach
</select>

{!! Form::label('subcategory_id', 'Subcategory:') !!}
<select class="form-control" name="subcategory_id" label="Subcategory">
    @foreach($subcategories as $subcategory)
        <option value='{{ $subcategory->id }}'> {{ $subcategory->name }}</option>
    @endforeach
</select>

问题是我坚持以下想法：类别和子类别是一对多的关系，这意味着当用户单击某个类别时，选择子类别应该只填充链接的值到选择的类别。

如何找到解决此问题的方法，我正在考虑创建一个 ajax 请求，但我不知道如何填充选项选择属性。或者创建一个 JSON（前端的所有工作）变量来存储子类别，并根据用户选择的类别更新选择标签。

任何帮助将不胜感激。

解决方案：

查看：

{!! Form::label('category_id', 'Category:') !!}
<select class="form-control" id="categories" name="category_id">
    @foreach($categories as $category)
        <option value='{{ $category->id }}'> {{ $category->name }}</option>
    @endforeach
</select>

<div id="displayCategories" style="display:none">
    {!! Form::label('subcategory_id', 'Subcategory:') !!}
    <select class="form-control" id="subcategories" name="subcategory_id" label="Subcategory">
        @foreach($subcategories as $subcategory)
            <option value='{{ $subcategory->id }}'> {{ $subcategory->name }}</option>
        @endforeach
    </select>
</div>

JS & JQUERY & AJAX：

<script
 src="https://code.jquery.com/jquery-3.1.1.js"
 integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
 crossorigin="anonymous"></script>

<script>
$('#categories').on('change',function(e) {
    var cat_id = e.target.value;
    //ajax
    $.ajax({
        url: '../ajax-subcat/{cat_id}', //note:that the path can be different for different purpose used, in a simple page -> '/ajax-subcat/{cat_id}' so use the console of your browser
        type: 'GET',
        data: {cat_id : cat_id},
        success: function(response)
        {
            $('#subcategories').empty();
            $('#displayCategories').show();
            $.each(response, function(index, subcatObj) {
                $('#subcategories').append('<option value="' + subcatObj.id + '">' + subcatObj.name + '</option>');
                console.log(subcatObj);
            });
        }
    });
});
</script>

路线：

Route::get('ajax-subcat/{cat_id}', 'PostController@getAjax');

控制器：

public function getAjax() 
{
   $cat_id = Input::get('cat_id');
   $subcategories = Subcategory::where('category_id', '=', $cat_id)->get();
   return Response::json($subcategories);
}

不要忘记在控制器中引入相应的模型，输入和响应的外观。 就我而言：

use Illuminate\Support\Facades\Input;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Response;
use App\Category;
use App\Subcategory;

【问题讨论】：

标签： javascript jquery ajax laravel laravel-5.4

【解决方案1】：

您没有提及您使用的 Laravel 版本，因此实现可能略有不同。您可以通过 ajax 方法来实现。您可以查看 Axios 进行前端调用，但您需要在 select 元素上设置事件侦听器，以便用户进行新选择。

【讨论】：

Laravel 最新版本，5.4