從表格下拉列表中選擇

Question

將數據動態添加到div上我一直在尋找相當長的一段時間，找不到一個堅實的答案。我使用的Laravel 5.3以及Laravel Collective的表單和Chosen來操縱我的選擇框。

基本上我有一個選擇下拉菜單，其中包含從數據庫中提取的值。 當我選擇一個值時，我不想使用所選項目的相關模型數據填充頁面上的每個空白「面板」。

因此，例如，當我選擇「管理員」時，我想查看「角色」表並顯示與選定值關聯的「描述」和「顯示名稱」。此外，我想獲取該條目的關聯權限並顯示它們。

這裏是我的形式：

      <div class="form-group"> 
           <script type="text/javascript"> 
            $(document).ready(function() { 
             $(".role").chosen() 
            }); 
           </script> 
           {!! Form::label('Role') !!} 
           <div class="input-group"> 
            <div class="input-group-addon"><i class="fa fa-user-plus" aria-hidden="true"></i></div> 
            {!! Form::select('role', $roles, null, ['id' => 'role', 'class' => 'select-width-100 form-control role']) !!} 
           </div> 
          </div> 
          {!! Form::label('Display Name') !!} 
          <div class="panel panel-default"> 
           <div class="panel-body" name="d_name" id="d_name"> 

           </div> 
          </div> 
          {!! Form::label('Description') !!} 
          <div class="panel panel-default"> 
           <div class="panel-body" name="description" id="description"> 

           </div> 
          </div> 

          <div class="input-group"> 
           <span class="input-group-btn"> 
           <button class="btn btn-danger" type="submit" name="update">Update</button> 
           </span> 
          </div> 

我知道有一種方法來火的AJAX和以「路線::獲得」接受它，但我不知道如何做到這一點還是在哪裏開始。我的jquery技能嚴重缺乏。

任何幫助將不勝感激。

Answer 1

一些示例代碼，只有當角色==管理員下拉更改時才檢索值。

$('#role').on('change', function() { 
     var role = $(this).val(); 
     if(role == 'admin') { 

      $.ajax({ 
       url : "{{url('role/details/')}}" + role, //your custom ajax get url 
       type: "GET", 
       success: function(data, textStatus, jqXHR) 
       { 
        $("#d_name").html(data.name); 
        $("#description").html(data.description); 
        }, 
        error: function (jqXHR, textStatus, errorThrown) 
        { 
         alert("error"); 
        } 
      }); 
     } 
    }); 

控制器：

public function getRoleDetails(Request $request) 
{ 
    ... 
    return response()->json(['name' => 'data data', 'description' => 'description description']); 
} 

Answer 2

首先，你必須創建一個部分，你將在控制器上根據自己的需要渲染。創建一個div，您將在成功回調中填充它。例如;

<div id='admin-information'></div> 

我不打算在這裏提到控制器代碼。這裏是jQuery代碼。

$('body').on('change', '.my-select', function(){ 

$.ajax({ 
       'method' : 'get', 
       'url' : 'some url', 
       'data' : { 
        'some_key' : $(this).data().val() 
       }, 
       beforeSend: function(){}, 
       success: function(response){ 
        $('#admin-information').html(response); 
       }, 
       error: function(response){}, 
       complete: function(response){} 
      }); 

});