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

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

控制器

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']);

---

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

对我来说，执行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>

---

另外，请注意您使用{！！！！}的位置，因为您可能引入了您绝对不想要的XSS。

您好，我遵循了您的代码，但它给我带来了一个尝试获取非对象属性的错误。也许我遗漏了什么。啊，我看到我输入了一个

$p->amount

应该是

$p->amount

。好的，我更改了它，它不再显示任何错误，但是amount输入框仍然没有更新。它仍然是空的。如果控制台在onChange中记录

$（“#产品选项：选中”）。数据（“金额”）

，控制台会显示什么？

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

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