Question

你好，所以我有两个下拉列表，第一个包含我的主要类别，第二个包含基于所选主类别的子类别，我尝试使用ajax和json。在我看来这里是下拉列表的代码

<div class="input-field col s10 offset-s1" style="margin-top:40px;">
    <h6>Main Categories</h6>
    <select name="category" id="category">
        @foreach($mCategories as $list)
            <option value="{{$list->maincategoryid}}">{{$list->maincategoryname}}</option>
        @endforeach
    </select>
</div>
<div class="input-field col s10 offset-s1" style="margin-top:40px;">
    <h6>Sub Categories</h6>
    <select name="subcategory" id="subcategory">
        <option value=""></option>
    </select>
</div>

<script>

    $('#category').on('change' , function(e){
        console.log(e);

        var cat_id = e.target.value;

        //ajax
        $.get('ajax-subcat?cat_id=' + cat_id , function(data){
            console.log(data);

            $('#subcategory').empty();

            $.each(data, function(index, subcatObj)
            {
              $('#subcategory').append('<option value="' + subcatObj.Object.subcategoryid +'">' + subcatObj.subcategoryname +'</option>');
            });

        });
    });

</script>

我还包含了一个脚本，无论何时“主要”类别都会调用ajax。下拉列表已更改。该ajax的代码在我的路线中，看起来像这样

Route::get('ajax-subcat' ,function()
{
$cat_id = Input::get('cat_id');
$subcategories = DB::table('nsa_subcategory')
                ->where('maincategoryid' , '=' , $cat_id)
                ->get();
return Response::json($subcategories);

});

基本上，它只返回基于用户选择的主要类别的子类别。回到我的视图，当用户更改主类别的值时，我的控制台中的json响应是这样的，

这些数据实际上是正确的。我想要做的是访问对象以获取子类别和子类别名称，然后在下拉列表中显示它。但到目前为止，我的代码在我的视图中，我无法填充子类别下拉列表。我的代码我做错了什么想法？谢谢你的帮助

Answer 1

尝试更改

 $.each(data, function(index, subcatObj) {
     $('#subcategory').append('<option value="' + subcatObj.Object.subcategoryid +'">' + subcatObj.subcategoryname +'</option>');
 });

到

for(var i = 0; i < data.length; i++) {
    $('<option value="' + data[i].subcategoryid + '">' + data[i].subcategoryname + '</option>').appendTo("#subcategory");
}

和

$.get();

到

$.getJSON();

Answer 2

像这样更改conrtoller JSON Response。

 Route::get('ajax-subcat' ,function()
  {
    $cat_id = Input::get('cat_id');
    $subcategories = DB::table('nsa_subcategory')
            ->where('maincategoryid' , '=' , $cat_id)
            ->get();

    return Response::json(array('result' => true,'data' => $subcategories),200)->setCallback(Input::get('callback'));
  });

以下列方式更改您的JS

 <script>

$('#category').on('change' , function(e){
    console.log(e);

    var cat_id = e.target.value;

    //ajax
    $.get('ajax-subcat?cat_id=' + cat_id , function(data){
        console.log(data);

        $('#subcategory').empty();

        $.each(data.data.subcategories, function(index, subcatObj)
        {
          $('#subcategory').append('<option value="' + subcatObj.subcategoryid +'">' + subcatObj.subcategoryname +'</option>');
        });

    });
});

laravel 4.2从json响应中的Object获取数据以填充下拉列表

2 个答案: