Question

TL; DR

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

END TL; DR

我正在使用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数据填充子下拉列表
删除display：none;属性

我希望我不会错过这里的一些东西。提前谢谢大家！

Answer 1

你肯定是在正确的轨道上。

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

要更新选择框，您可以沿着这些行使用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");

在父下拉列表更改时重新填充子dropdow

1 个答案: