根据第一个选择框显示产品的金额

Question

我无法根据我在初始选择框中选择的内容来显示产品的数量。我只有 1 个名为 products 的表，它包含 id、name、amount 列。

product.blade.php

<td>
 <select name="product">
    <option selected="true" disabled="true">Products</option>
     @foreach($products as $id => $p)
        <option value="{!!$id!!}">{!!$p!!}</option>
     @endforeach
 </select>
</td>
<td>
    <input id="amount" type="text" name="amount" class="form-control 
    required" value=""/>
</td>

javascript

 $('#product').on('change', function () {
        var productid=$(this).val();
        var a=$(this).parent();
        var op="";
        $.ajax({
            type:'get',
            url:'{!!URL::route('getAmount')!!}',
            data:{'id':productid},
            dataType:'json',
            success:function(data){
                console.log(data.amount);
                a.find('#amount').val(data.amount);
            },
            error:function(){
            }
        });
    });

控制器

public function getProducts()
{
  $products = Product::lists('name', 'id', 'amount');
  return view('product', compact('products');
}

public function getAmount(Request $request){

  $product=Product::select('amount')->where('id',$request->id)->first();

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

路线

Route::get('product', ['as' => 'product',
        'uses' => 'ProductController@getProducts']);
Route::get('/product/getAmount', ['as' => 'getAmount',
        'uses' => 'ProductController@getAmount']);

我只是想在旁边的输入框中显示产品的数量。

Answer 1

执行 ajax 请求对我来说似乎毫无用处，将数据属性添加到选项会不会更容易。

<td>
    <select id="products" name="product">
        <option selected="true" disabled="true">Products</option>
        @foreach($products as $id => $p)
            <option data-amount="{{ $p->amount }}" value="{{ $id }}">{{ $p }}</option>
        @endforeach
     </select>
</td>
<td>
    <input id="amount" type="text" name="amount" class="form-control required" value=""/>
</td>

然后在选择更改时添加一些javascript或jquery来填充输入。

$("#products").change(function() {
    $("#amount").val($("#products option:selected").data("amount"))
})

另外，注意你在哪里使用 {!! !!} 因为你可能引入了你绝对不想要的 XSS。