Question

选择下拉列表后如何执行自动填充。我不太擅长js或ajax。当用户选择doc_no时，必须同时填写rev_no和title字段。谢谢！

查看


 <div class="form-group">
{!! Form::label('text', 'Doc No', ['class' => 'col-lg-3 control-label']) !!}
<div class="col-lg-10">
<select name="docNo" id="docNo" class="form-control" style="width:250px">

@foreach ($soplists as $soplist)
<option value="{{ $soplist->id }}">{{ $soplist->doc_no }}</option>
@endforeach
</select>
</div>
</div>



<input type="hidden" name="carType" value="Internal Audit" class="form-control">

<div class="form-group">
{!! Form::label('text', "Rev No", ['class' => 'col-lg-5 control-label']) !!}
<div class="col-lg-5">
<input type="text" class="form-control" id="rev" />

</div>
</div>


<div class="form-group">
{!! Form::label('text', "Title", ['class' => 'col-lg-5 control-label']) !!}
<div class="col-lg-10">
<input type="text" class="form-control" id="title" />

</div>

<script>
    $('#docNo').change(function() {
        var id = $(this).val();
        var url = '{{ route("getDetails", ":id") }}';
        url = url.replace(':id', id);

        $.ajax({
            url: url,
            type: 'get',
            dataType: 'json',
            success: function(response) {
                if (response != null) {
                    $('#rev').val(response.rev_no);
                    $('#title').val(response.title);
                }
            }
        });
    });
</script>

控制器 --- php

   public function getDetails($id = 0)
{
    $data = sopList::where('doc_no', $id)->first();
    echo json_encode($data);
    exit;
}

路线


'Route::get('get/details/{id}', 'internalAuditController@getDetails')->name('getDetails');'

数据库sop_list表图像链接

https://ibb.co/SwkJhLc

下拉并输入图像

https://ibb.co/0VN3Z2y

“网络”标签

https://ibb.co/56w5BLD

Answer 1

您必须做出溃败，以返回所需的东西例如

 /**
 * @return \Illuminate\Http\JsonResponse
 */
public function getCategories()
{
    $category = Category::where('_id', request()->get('_id'))
        ->select(['name', '_id'])->first();

    return response()->json($category);
}

然后在使用ajax更改选择框时调用它，并在需要的任何位置显示它像这个例子：

$("#docNo").change(function () {    
 $.ajax({
            url: "{{ route('getCategories') }}",
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}",
                _id: $(this).val()
            },
            success: function (data) {
                 var newOption = '';
                    $.each(data, function (k, category) {
                        newOption += '<option value="' + category.id +                         '">' + category.name + '</option>';
                    });

                    $('#parent').append(newOption);
            },
            error: function (error) {
                console.log(error);
            }
        });
        });

Answer 2

您可以在docNo上添加onChange方法，然后调用do ajax调用获取rev_no和title并通过document.getElementById（）更新内容。

Answer 3

在web.php文件中添加路线：

Route::get('get/details/{id}', 'YourController@getDetails')->name('getDetails');

控制器功能：

public function getDetails($id=0){
        $data = sopList::where('doc_no',$id)->first();
        echo json_encode($data);
        exit;
    }

然后在脚本中查看：

$('#docNo').change(function(){
    var id = $(this).val();
    var url = '{{ route("getDetails", ":id") }}';
    url = url.replace(':id', id);

    $.ajax({
        url: url,
        type: 'get',
        dataType: 'json',
        success: function(response){
            if(response != null){
                $('#rev').val(response.rev_no);
                $('#title').val(response.title);
            }
        }
    });
});

确保将ID rev和title分别添加到rev和title输入字段中。

Laravel-从下拉列表中选择值后自动填充输入

3 个答案: