如何使用下拉列表 select 选项数据属性获取多个值？

Question

I want to get two data using data attribute and display the two value in two separate input field readonly.

I can get one value properly. data-price, but I can't get data-saleP.

 $('.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

It's simple, use same code with salep like:

 $('.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>