jQuery 数据属性值答案

【问题标题】：jQuery Data Attribute valuejQuery 数据属性值
【发布时间】：2019-07-22 12:16:15
【问题描述】：

我有一组取自输入 (prices[]) 的值，我想根据具有数据属性的选定选项为输入值添加值。

price input 我想从 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>

【问题讨论】：

请在此处发布所有相关代码，以便我们重现您的问题。不要把它放在图像中
我已将您的代码转换为可运行的 sn-p。如您所见，它运行良好。
"仅对第一项不能正常工作" - 您的意思是“选择产品”选项，即“第一项”。如果用户尝试选择此选项，您期望会发生什么？无法选择，因为它已禁用。删除disabled 属性，如果您希望它是可选的，请给它data-price=""。

标签： jquery attributes

【解决方案1】：

您需要选择属于该特定产品的价格元素，我创建了一个带有 product-wrap 类的 div，它同时具有选择和价格输入，您应该选择一个同时具有两个输入的元素

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

【讨论】：