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

时间:2016-11-17 19:50:01

标签: javascript php ajax laravel laravel-5.2

我不知道发生了什么事!这段代码不适合我。我没有得到错误。它正确显示菜单但不显示特定菜单下的任何子菜单。     这是我的代码:

##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>

此代码中的问题是什么?

3 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:1)

我的js文件中有一个简单的遗漏。这是'/'问题。

答案 2 :(得分:0)

您的代码中存在许多错误。您只需复制并粘贴忘记更改这些值 为此,我使用单独的控制器和JavaScript。
在我的视图中

<div class="form-group">
   <label align="right" for="name" class="control-label col-xs-2">Course :</label>
      <select class="col-md-5 input-sm" name="name" id="name">
        @foreach ($menuItem as $menu)
           <option value="{{ $menu->id }}" placeholder="choose menu">{{ $menu->name }}</option>
        @endforeach
      </select>
 </div>

获取子菜单项,我使用的是Javascript

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

 $(document).ready(function(){
     $('#name').on('change',function(e){
        console.log(e);
        var parentID= e.target.value;
          $.getJSON('/your current url/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>');
           });
        }); 

      });
 });

route.php我有

Route::get('your current url/sub','MyJSController@loadchild');

在我的MyJSController中 - &gt; loadchild函数有

public function loadchild()
{
 $parent = Input::get('parentID');

 $sub_menu= DB::table('menus')
                   ->where('parent_id','=',$parent)
                   ->select('id','name')
                   ->get();
return response()->json($sub_menu);

}

您的VIEW中的子菜单下拉应该是这样的

<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>

public function create()
{
   $menuItem = DB::table('menus')
                    ->where('parent_id','=',0)
                    ->get();
   return view('menu.createmenu', compact('menuItem'));
}

确保您已导入
控制器中的use Illuminate\Support\Facades\Input; use DB;
还有一件事由于存在安全漏洞,请不要使用{!! Form::close() !!}这些。使用{{ Form::close() }}