如何为选定的下拉列表ajax加载所有匹配的数据行

时间:2015-10-12 04:31:04

标签: javascript php jquery ajax laravel-5.1

我有user_id和er的下拉框,一旦选中,我想将所有数据加载为行。请建议。

下面是我的控制器

$getShifts = Shifts::Where('user_id','=',$user_id)->Where('week_id','=',$week)->get();

我该怎么办

   <table class="table table-hover">
                                    <tr class="table-header">
                                        <th>Day</th>
                                        <th>Date</th>
                                        <th>Start</th>
                                        <th>End</th>
                                        <th>Total
                                            <br/> Hours
                                        </th>
                                        <th>Run
                                            <br/> Type
                                        </th>
                                        <th>Edit
                                            <br/> / Delete
                                        </th>
                                    </tr>

EDIT 请仔细检查以下我尝试的代码

               success: function(data) {
                    var json_obj = $.parseJSON(data);//parse JSON

                    var output="<tr>";
                    for (var i in json_obj)
                    {

                        output+=
                                "<td>" +  json_obj[i].id + "</td>"+
                                "<td>" +  json_obj[i].bus_no + "</td>"+
                                "<td>" +  json_obj[i].shift_no + "</td>"

                        ;

                    }
                    output+="</tr>";

                    $('#span').html(output);

                }

1 个答案:

答案 0 :(得分:1)

您应该在ajax和控制器中调用控制器功能,您将获得所选数据,因此基于该运行所需的查询。

$(document).ready(function() {
    $("#combo, #user_id").change(function(){

       var combo = $('#combo option:selected').val();    
       var user_id = $('#user_id option:selected').val();   
       if(combo && user_id) { 
            $.ajax({
                url: "path to controller function",
                type: "POST",
                dataType: "HTML",
                async: false,
                data:{combo:combo.user_id:user_id},
                success: function(data) {
                      alert(data)   // here you ll see the data from controllen, you can manipulate according to your requirement.               
                }
          }); 
        }

     });
});
控制器中的

echo "
   <tr>
       <td>$day</td>
       <td>$date</td>
       <td>$start</td>
       <td>$end</td>
       <td>$end</td>
       <td>$end</td>
   </tr>  ";

操纵控制器中tr的所有字段,并在ajax success()中将数据附加到表格。