jQuery數據屬性值

Question

我有一個從輸入中獲取值的數組（prices []），我想根據具有數據屬性的所選選項將值添加到輸入值中。

價格輸入我想從data-price中獲取價值並將data屬性的價值放入price []中，但是當我選擇它時，它不能僅對第一項正常工作。

新增產品

碼

 $('.products').change(function() { let price = $(this).children(':selected').data('price'); $('.prices').val(price); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-lg-4"> <label for="product">Product</label> <select class="form-control kt-select2 products" id="kt_select2_2" name="products[]" required> <option selected disabled>Select a product</option> <option value="1" data-price="1">Product 1</option> <option value="2" data-price="2">Product 2</option> <option value="3" data-price="3">Product 3</option> </select> </div> <div class="col-lg-4"> <div class="form-group"> <label for="price">Product Price</label> <input type="text" class="form-control prices" id="price" name="price[]" placeholder="Enter product price" value="0" required> </div> </div> 

Answer 1

您需要選擇屬於該特定產品的prices元素，我創建了一個具有product-wrap類的div，其中同時包含select和price輸入，您應該選擇一個同時包含兩個input的元素

 $('.products').change(function() { let price = $(this).children(':selected').data('price'); $(this).closest('.product-wrap').find('.prices').val(price); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-wrap"> <div class="col-lg-4"> <label for="product">Product</label> <select class="form-control kt-select2 products" id="kt_select2_2" name="products[]" required> <option selected disabled>Select a product</option> <option value="1" data-price="1">Product 1</option> <option value="2" data-price="2">Product 2</option> <option value="3" data-price="3">Product 3</option> </select> </div> <div class="col-lg-4"> <div class="form-group"> <label for="price">Product Price</label> <input type="text" class="form-control prices" id="price" name="price[]" placeholder="Enter product price" value="0" required> </div> </div> </div> <div class="product-wrap"> <div class="col-lg-4"> <label for="product">Product</label> <select class="form-control kt-select2 products" id="kt_select2_2" name="products[]" required> <option selected disabled>Select a product</option> <option value="1" data-price="1">Product 1</option> <option value="2" data-price="2">Product 2</option> <option value="3" data-price="3">Product 3</option> </select> </div> <div class="col-lg-4"> <div class="form-group"> <label for="price">Product Price</label> <input type="text" class="form-control prices" id="price" name="price[]" placeholder="Enter product price" value="0" required> </div> </div> </div>