Question

我已经搜索了很长一段时间，但却找不到可靠的答案。我使用Laravel 5.3以及Laravel Collective表单和Chosen来操作我的选择框。

基本上我有一个选择下拉列表，其中包含从数据库中提取的值。当我选择一个值时，我不想填充每个空的面板＆＃39;在页面上包含所选项目的相关模型数据。

例如，当我选择＆＃39; admin＆＃39;我想看一下＆＃39;角色＆＃39;表和显示＆＃39;描述＆＃39;和＆＃39; display_name＆＃39;与所选值相关联。此外，我想获得该条目的相关权限并显示它们。

这是我的表单：

                            <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并使用＆＃39; route :: get＆＃39;但我不知道该怎么做或从哪里开始。我的Jquery技能严重缺乏。

非常感谢任何帮助。

Answer 1

一些示例代码，仅在下拉更改时使用role == admin检索值。

    $('#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>。 e.g;

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

});

我不打算在这里提到控制器代码。这是jQuery代码。

@NotNull

Answer 3

通过表格可套用的方式，将选项最好，最简便地放入选择控件中。

HTML

{{Form::select('ddl_school',['all'=>'Select all'], [], ['class'=>'form-control ddlsl'])}}

jQuery函数

function getSchool(id) {
            $.ajax({
                type:'GET',
                url:'/ajaxRequest/getSchools/'+id,
                success:function(data){
                    if(data.success) {
                        $.each(data.data, function(index, value) {
                            **$('.ddlsl').append(new Option(value.name, value.locale_id));**
                        });
                    }
                },
                onError: function () {
                    alert('Something wants to wrong');
                }
            });
        }

在表单下拉列表中从模型动态向div添加数据，选择

3 个答案: