cách hiển thị tất cả menu và menu con trong một danh sách thả xuống khác?

Question

Tôi không biết chuyện gì đang xảy ra! mã này không hoạt động đúng cách. tôi không gặp lỗi. nó hiển thị menu đúng nhưng không hiển thị bất kỳ menu con nào trong menu cụ thể. Đây là mã của tôi:

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

sự cố trong mã này là gì?

Answer 1

Có nhiều lỗi trong mã của bạn. Bạn chỉ cần sao chép và dán quên để thay đổi các giá trị đó.
Để thực hiện việc này, tôi đang sử dụng bộ điều khiển riêng và javascript.
quan điểm của tôi

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

Để nhận được các mục menu phụ, tôi đang sử dụng 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>'); 
      }); 
     }); 

     }); 
}); 

trong route.php của tôi, tôi có

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

Trong MyJSController của tôi -> hàm loadchild có

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

} 

menu phụ bạn thả xuống trong XEM của bạn nên được như thế này

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

Hãy chắc chắn rằng bạn nhập
use Illuminate\Support\Facades\Input; use DB; trong điều khiển của bạn.
Một điều bổ sung
Không sử dụng {!! Form::close() !!} các lỗi này vì lỗ hổng bảo mật. Sử dụng {{ Form::close() }}

Answer 2

Hãy thử thêm id như tham số thứ ba trong mối quan hệ của bạn,

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

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

Answer 3

Đó là một đơn giản thiếu trong file js của tôi. đó là một vấn đề '/'.