Question

我正在尝试将存储在多个下拉列表中的值传递给select上的相关输入字段。我已经让它在某种程度上工作了，但是当父输入字段和选择下拉列表在父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);

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

1 个答案: