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

Posted 2023-02-24

【中文标题】Laravel-从下拉列表中选择值后自动填充输入

【英文标题】：Laravel- Auto fill input after selecting value from dropdown

【发布时间】：2020-01-19 02:32:53

【问题描述】：

选择下拉列表后如何进行自动填充。我不太擅长 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

【问题讨论】：

你尝试过的。显示一些代码。

@BhavikKalariya 你好，我刚刚更新了我的问题！

输入字段将填写什么值？？

@zahidhasanemon 在选择 doc_no 后输入必须填写 rev_no 和标题

嗯，我的意思是值从哪里来？？数据库？？

【参考方案1】：

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

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

控制器功能：

public function getDetails($id = 0)

    $data = sopList::where('doc_no',$id)->first();
    return response()->json($data);

并在查看脚本：

$('#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 输入字段。

【讨论】：

谢谢兄弟，但还是不行。我已经用你的代码更新了我的问题。你能检查是否有任何错误。

对我来说似乎没问题。您可以从浏览器控制台的网络选项卡检查您的 ajax 请求是否正常工作吗？？

单击一个并检查响应控制器返回的内容。

我不太了解这件事。我还有其他方法可以解决这个问题。

你必须学习一些东西来解决你的问题。尝试学习如何使用浏览器控制台来处理 ajax 请求。 :)

【参考方案2】：

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

【参考方案3】：

你必须做出一个返回你需要的东西的溃败 例如

 /**
 * @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);
            
        );
        );

【讨论】：

嘿，视图中的选择怎么样？我需要更换什么吗？谢谢

我的代码只是一个示例，您必须将其更改为您想要的，但基础是相同的。你需要一个 rout 和 ajax 调用来改变你的选择