当父下拉列表更改时，重新填充子下拉列表

TL；博士

如何从父下拉列表(使用.change(((向输出JSON的工作url发出jQuery请求，并重新填充子下拉列表。

结束TL；博士

我使用的是Laravel 5.1，所以我的代码会有点特定于Laravel，但不会太多，因为这是初学者级别的jQuery问题。

我有两次摔倒。一个用于类别(父类别(，另一个用于子类别(子类别(。

我的父母下拉列表：

<div class="form-group">
    {!! Form::label('category_id', '*Categories') !!}
    {!! Form::select('category_id', $categories, null) !!}
</div>

生成

<div>
    <label for="category_id">Categories</label>
    <select id="category_id" name="category_id">
        <option value="1">Category 1</option>
        <option value="2">Category 2</option>
        <option value="3">Category 3</option>
    </select>
</div>

我的孩子下拉列表：

<div sytle="display:none;">
    {!! Form::label('subcategory_id', 'Subcategory') !!}
    {!! Form::select('subcategory_id', [], null) !!}
</div>

生成

<div sytle="display:none;">
    <label for="subcategory_id">Subcategories</label>
    <select id="subcategory_id" name="subcategory_id">
    </select>
</div>

我已经定义了路由：subcategoriesfordropdown/{i}，我将i发送到它，它为我提供了带有父类别的子级的JSON。例如，如果我使用URL subcategoriesfordropdown/2，我会得到：

{"3":"Subcategory 1 title","4":"Subcategory 2 title"}

""中的数字是子类别ID。这一切都正常工作。

现在我想用这些id/title对重新填充子下拉列表，这样我就可以得到：

<div sytle="display:none;">
    <label for="subcategory_id">Subcategories</label>
    <select id="subcategory_id" name="subcategory_id">
        <option value="3">Subcategory 1 title</option>
        <option value="4">Subcategory 2 title</option>
    </select>
</div>

我制作了这个jQuery脚本：

<script>
$(document).ready(function(){
    $("#category_id").change(function (){
        var category = $(this).val();
        alert( "Category: " + category );
    });
});
</script>

当我更改父下拉值时，它会弹出一个带有类别ID的警告框。然而，我希望它运行POST请求(我相信POST是正确的，但GET也可以(来获取JSON数据并从中创建选项值，而不是警报函数。也可以更改display:none;，但这应该不是问题。

我试着用替换alert();

$.post( "/subcategoriesfordropdown/" + category, , function( data ){
    alert( "Data: " + data );
});

接收subcategoriesfordropdown/{i}提供的数据，但我在这里失败了。

下面是我的TODO列表：

• 运行POST请求
• 获取JSON数据
• 用JSON数据填充子下拉列表
• 删除显示：无；属性

我希望我没有在这里错过什么。提前感谢大家！

$.post( "/subcategoriesfordropdown/" + category, function( data ){
     var $select = $('#subcategory_id');
     $select.empty();
     $.each(data, function(value, text){
          $select.append($("<option></option>")
              .attr("value", value).text(text));
     });
     $select.show();
}, "json");