javascript - 如何在不同的下拉列表中显示所有菜单和子菜单项？

Question

不知道怎么回事!此代码无法正常工作。我没有得到错误。它正确显示菜单但不显示特定菜单下的任何子菜单。 这是我的代码:

##Table: menus##

    id  name                    parent_id   
    1   Dhaka                   0   
    2   Chitagong               0   
    3   Chittagong University   2   
    4   Dhaka University        1   
    5   Barisal                 0   
    6   Chittagong University   5


##route:##
Route::get('/', 'MenuController@index');
Route::get('/sub','MenuController@subMenu'); 


##Model:##



    <?php

    namespace App;

    use Illuminate\Database\Eloquent\Model;

    class Menu extends Model
    {
        protected $fillable = [
            'id','name','parent_id'
        ];
    }


    ##Controller :##

       <?php

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;
    use Illuminate\Support\Facades\Input;
    use App\Http\Requests;
    use App\Menu;

    class MenuController extends Controller
    {
        public function index()
        {
            $menuItem = Menu::where('parent_id', '=',0)->get();
            return view('index', compact('menuItem'));
        }
        public function subMenu()
        {
            $parent = Input::get('parentID');
            $sub_menu= Menu::where('parent_id','=',$parent)
                       ->select('id','name')
                       ->get();
                       return response()->json($sub_menu);
                   }

    }


    ##View:##
        <!--/.start add menu section-->
         <div class="row">
             <div class="col-xs-12">
             <div class="panel panel-default">
              <div class="panel-heading">
                <strong>Menu </strong>
              </div>
              <div class="panel-body">
                <div class="form-horizontal">
                  <div class="row">
                    <div class="col-xs-8">
                      {{ Form::open(['class' => 'form-horizontal', 'role' => 'form']) }}
                      <div class="form-group">
                      <label align="right" for="name" class="control-label col-xs-2">Menu :</label>
                      <select class="col-md-5 input-sm" name="menu" id="menu">
                            @foreach ($menuItem as $menu)
                               <option value="{{ $menu->id }}" placeholder="choose menu">{{ $menu->name }}</option>
                            @endforeach
                     </select>
                    </div>
                    <div class="form-group">
                        <label align="right" for="child_id" class="control-label col-xs-2">Sub Menu :</label>
                          <select class="col-md-5 input-sm" name="child_id" id="child_id" >

                           </select>
                     </div>

                    </div>

                  </div>
                </div>
              </div>
               <div class="panel-footer">
              <div class="row">
                <div class="col-md-8">
                  <div class="row">
                    <div class="col-md-offset-2 col-md-6">

                       {!! Form::submit('Save', ['class' => 'btn btn-primary add-submenu']) !!}

                    </div>
                  </div>
                </div>
              </div>

              </div>
            </div>


      {{ Form::close() }}

            </div>
         </div>
    javascript:
    -------------
 <script type="text/javascript">
   $.ajaxSetup({
   headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
   }
});

 $(document).ready(function(){
     $('#menu').on('change',function(e){
        console.log(e);
        var parentID= e.target.value;
          $.getJSON('/sub?parentID=' + parentID, function(data){

          console.log(data);
          $('#child_id').empty();
           $.each(data,function(index, child){
               $('#child_id').append('<option value="'+child.id+'">'+child.name+'</option>');
           });
        }); 

      });
 });
 </script>

这段代码有什么问题？

Answer 1

尝试在关系中添加 id 作为第三个参数，

public function parent()
{
    return $this->belongsTo('App\Menu', 'parent_id', 'id');
}

public function children()
{
    return $this->hasMany('App\Menu', 'parent_id', 'id');
}