当 [=11th=] 下拉列表更改时重新填充 child 下拉列表

Question

TL;DR

如何从 parent 下拉列表（使用 .change() ）发出 jQuery 请求到输出 JSON 并重新填充 child 下拉列表的工作 url .

结束 TL;DR

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

我有两个下拉菜单。一个用于类别 (parent)，另一个用于子类别 (child)。

我的 parent 下拉菜单：

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

我的 child 下拉菜单：

<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 和 parent 类别的 children。例如，如果我使用 URL subcategoriesfordropdown/2 我得到：

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

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

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

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

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

我尝试将 alert(); 替换为：

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

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

这是我的 TODO 列表：

运行POST请求
获取JSON数据
使用 JSON 数据填充 child 下拉列表
删除display:none；属性

希望我没有遗漏其他内容。提前谢谢大家！

Answer 1

你绝对是在正确的轨道上。

我看到您的 $.post 的唯一问题是 category 之后的额外 ,。我还建议使用 "json" 标记 - 它只是防止您必须在函数中使用 json_decode。

要更新 select 框，您可以按照这些行使用 Javascript。（未经测试，但理论上正确，除非打字错误）

$.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");

当 [=11th=] 下拉列表更改时重新填充 child 下拉列表

repopulate child dropdow when parent dropdown changed

php

jquery

json

html-select