javascript - 从下拉数据属性获取值并将其传递到输入字段

Question

我正在尝试将存储在多个下拉列表中的值传递到选择时的相关输入字段。我已经让它在一定程度上工作，但当输入字段和选择下拉菜单不在位于父 div 下时，我无法让它工作。

当前工作代码

$(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);
  });
});

<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 select2">
        <option value="100" value="10">Material A</option>
        <option data-price="400" value="20>">Material B</option>
        <option data-price="500" value="30">Material C</option>
    </select>
    <input type="text" class="material-total" readonly />
  </div>
</div>

我正在尝试修复的代码

<div class="row">
  <div class='col-md-2 nopadding'>
    <div class='form-group nomarg'>
      <select class="material-pricex select2">
        <option data-price="100" value="10">Material A</option>
        <option data-price="400" value="20>">Material B</option>
        <option data-price="500" value="30">Material C</option>
      </select>
    </div>
  </div>

  <div class='col-md-1 nopadding'>
    <div class='form-group nomarg'>
       <input type='number' id="total" name="total" min='0' class='form-control'>
    </div>
  </div>     
</div>

如何获取在 material-pricex 上选择的数据价格值并将其传递到“总计”输入字段？

Answer 1

您的植入问题是使用 .parent()它仅针对所选元素的直接父元素，因此您的代码不起作用。

您可以使用.closest()/.parents()遍历到共同祖先然后使用 .find()以定位所需的元素。

$(this).closest('.row').find('.material-total').val(materialValue);