根据第一个选择框显示产品数量

时间:2017-10-09 19:58:44

标签: javascript jquery html mysql laravel

根据我在初始选择框中选择的内容,我无法显示产品数量。我只有一个名为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']);

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

1 个答案:

答案 0 :(得分:0)

执行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>

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

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

另外,请注意您使用的位置{!! !!}因为你可能会介绍你绝对不想要的XSS。