javascript - 从多个选定下拉列表(动态下拉列表)的数据属性中获取值

我试图将所选下拉列表的数据属性设置为一个输入框，给定的代码对于包含在页面中的单个下拉列表非常有效，它将数据属性输出到输入框。
但是当我加上两个或更多的下拉列表时，值就不正确了。我正在处理从数据库中检索的动态数据，因此下拉列表的数量可能不同。如何编写动态的js代码？

$(document).ready(function() {
  $('select.material-price').change(function() {
    var materialValue = $('select.material-price').find(':selected').data('price');
    $('.material-total').val(materialValue);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <select class="material-price">
            <option data-price="100000" value="10">Material A</option>
            <option data-price="400000" value="20>">Material B</option>
            <option  data-price="500000" value="30">Material C</option>
        </select>
    <input type="text" class="material-total" readonly />
  </div>

  <div class="row">
    <select class="material-price">
            <option data-price="100000" value="10">Material A</option>
            <option data-price="400000" value="20>">Material B</option>
            <option  data-price="500000" value="30">Material C</option>
        </select>
    <input type="text" class="material-total" readonly />
  </div>

</div>

最佳答案

使用$(this)jquery从激发的select数据中获取值，并使用$next()将值赋给select旁边的input sits。

$(document).ready(function() {
  $('select.material-price').change(function() {
    var materialValue = $(this).find(':selected').data('price');
    $(this).next('.material-total').val(materialValue);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <select class="material-price">
        <option data-price="100000" value="10">Material A</option>
        <option data-price="400000" value="20>">Material B</option>
        <option  data-price="500000" value="30">Material C</option>
    </select>
    <input type="text" class="material-total" readonly />
  </div>

  <div class="row">
    <select class="material-price">
        <option data-price="100000" value="10">Material A</option>
        <option data-price="400000" value="20>">Material B</option>
        <option  data-price="500000" value="30">Material C</option>
    </select>
    <input type="text" class="material-total" readonly />
  </div>

更新：当使用jquery时，您的结构肯定会在dom上得到更改。显然我们也需要重新构造查询。请检查下面的代码段以供参考。

$(document).ready(function() {
  $('.select2').select2();
});

$(document).ready(function() {
  $('select.material-price').change(function() {
    var materialValue = $(this).select2().find(":selected").data("price");
    $(this).parent('.row').find('.material-total').val(materialValue);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<div class="container">
  <div class="row">
    <select class="material-price select2">
      <option value="100000" value="10">Material A</option>
      <option data-price="400000" value="20>">Material B</option>
      <option data-price="500000" value="30">Material C</option>
    </select>
    <input type="text" class="material-total" readonly />
  </div>
  <div class="row">
    <select class="material-price select2">
      <option data-price="100000" value="10">Material A</option>
      <option data-price="400000" value="20>">Material B</option>
      <option data-price="500000" value="30">Material C</option>
    </select>
    <input type="text" class="material-total" readonly />
  </div>
</div>