从表格下拉列表中选择

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

});