javascript - 创建子类别选择框 onChange

Question

我正在创建一个类别系统，用户可以在其中从数据库中选择类别，并在选择后创建另一个包含该类别子类别的选择框。

所以，我的问题是我怎样才能最好地做到这一点？

顺便说一句，我正在使用 Laravel 框架，第一类很简单

<select>
    @foreach(Category::all() as $k)
      <option value="{{ $k['id'] }}">{{ $k['name'] }}</option>
    @endforeach
</select>

但是他们选择类别后我应该做什么？是否最好进行 AJAX 调用来发送所选类别的 ID 并返回子类别或什么？

我需要最好、最专业的方式来做到这一点。

在我的数据库中，我有

ID,   name,   parent

Answer 1

使用ajax，选择category后发送ajax请求，为此，您需要使用change > select 上的事件，例如:

// Assumed category is id of the select
$('#category').on('change', function(){
    var id = $(this).val();
    $.getJSON("subcategory/" + id , function(data){
        // Assumed subcategory is id of another select
        var subcat = $('#subcategory').empty();
        $.each(data, function(k, v){
            var option = $('<option/>', {id:k, value});
            subcat.append(option);
        });
    });
});

在服务器端，创建一个像这样的路由(您可以使用 Controller 和 Eloquent):

Route('subcategory/{id}', function($id){
    // Get the data from database according to the id
    // Build an array as: id => value and then return
    return Response::json($subcat);
});