如何使用下拉列表 select 選項數據屬性獲取多個值？

Question

我想使用數據屬性獲取兩個數據，並在兩個單獨的輸入字段中以只讀方式顯示這兩個值。

我可以正確地獲得一個值。 數據價格，但我無法獲得數據銷售。

 $('.selectProduct').on('change', function() { $('.regularPrice').val( $(this).find(':selected').data('price') ); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="selectProduct" class="form-control selectProduct" name="productId"> <option selected="">Select Product</option> <option data-price="150" data-salep="50" value="1">Product 1</option> <option data-price="120" data-salep="110" value="2">Product 2</option> </select> <div class="row"> <div class="col-md-6"> <div class="form-group form-group-sm"> <label>Regular Price</label> <input type="text" readonly="" class="form-control regularPrice" id="regularPrice" name="regularPrice" value=""> </div> </div> <div class="col-md-6"> <div class="form-group form-group-sm"> <label>Sale Price</label> <input type="text" readonly="" class="form-control salePrice" id="salePrice" name="salePrice" value=""> </div> </div> </div>

Answer 1

很簡單，使用與salep相同的代碼，例如：

 $('.selectProduct').on('change', function() { $('.regularPrice').val( $(this).find(':selected').data('price') ); $('.salePrice').val( $(this).find(':selected').data('salep') ); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="selectProduct" class="form-control selectProduct" name="productId"> <option selected="">Select Product</option> <option data-price="150" data-salep="50" value="1">Product 1</option> <option data-price="120" data-salep="110" value="2">Product 2</option> </select> <div class="row"> <div class="col-md-6"> <div class="form-group form-group-sm"> <label>Regular Price</label> <input type="text" readonly="" class="form-control regularPrice" id="regularPrice" name="regularPrice" value=""> </div> </div> <div class="col-md-6"> <div class="form-group form-group-sm"> <label>Sale Price</label> <input type="text" readonly="" class="form-control salePrice" id="salePrice" name="salePrice" value=""> </div> </div> </div>