Question

我正在用jQuery构建一个Laravel应用程序。我有一个带有选择框（产品列表）和文本输入字段的表单。

我的要求是当我从顶部的“选择”框中选择产品时，所有其他字段的值应根据从所选产品的数据库中提取的产品值进行更新。

这是我的js脚本：

$(document).ready(function() {

    var divKey = $( "#proposed_product option:selected" ).val();

    $( "#proposed_product" ).change(function() {
        updateKeyValues();
    });

    function updateKeyValues() {
        $("#proposed_product").val(divKey);
        console.log(proposed_product); //what to do here..???

    }

});

我的laravel函数返回演出列表：

public function proposegigs($id){
    $gig = Gig::findOrFail($id);
    return $gig;

有人可以帮助如何实现这个目标吗？

Answer 1

进行ajax调用以获取数据

$( "#proposed_product" ).change(function() {
    $.ajaxSetup({
       headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
       url: "{{ route('your-route') }}",
       type: "POST",
       data: {id: $( "#proposed_product :selected" ).val()}, //send data to controller
       success: function(result){
           console.log(result);
           //check the console then put the data where you want
       }
    });

    $.ajax();
});

在你的控制器中返回json响应

public function proposegigs(Request $request){
    $gig = Gig::findOrFail($request->id);
    return response()->json(['data' => $gig]);
}

Answer 2

你可以禁用未更改的项目，如下，

$( "#proposed_product" ).change(function() {

    var selectedItem = $(this)

    $.each( $( "#proposed_product" ).children('option'), function (index, item) { 
        if(selectedItem.val() != $(item).val()) {
            $(this).prop('disabled', true)
        }
    })
});

此外，您可以按照发送请求的结果更改选项。

$( "#proposed_product" ).change(function() {

    var selectedItem = $(this)

    // Example Request
    $.get('https://httpbin.org/get', function(data) {
        $.each( $( "#proposed_product" ).children('option'), function (index, item) { 
            if(selectedItem.val() != $(item).val()) {
                $(this).text(data.origin)
            }
        })
    })
});

此外，您的回复必须是json格式，

public function proposegigs(Request $request){
    $gig = Gig::findOrFail($request->id);
    return response()->json($gig, 200);
}

Laravel，jquery - 按选择框填写输入框

2 个答案: