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

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 响应是这样的，

这些数据实际上是正确的。我想要做的是访问对象以获取 subcategoryid 和 subcategoryname 然后将其显示在下拉列表中。但到目前为止，在我看来，我的代码无法填充子类别下拉列表。任何想法我的代码做错了什么？感谢您的帮助

Answer 1

像这样更改控制器 JSON 响应。

 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>');
        });

    });
});

Answer 2

尝试改变

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