Question

我正在尝试将所选下拉列表的数据属性设置为输入框，并且给定代码完美地适用于页面中包含的单个下拉列表，并将数据属性输出到输入框。

但是当我添加两个或更多下拉列表时，值不正确。我正在处理从数据库检索的动态数据，因此下拉量可能会有所不同。我怎样才能将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>

Answer 1

利用$(this) jquery从触发的select数据中获取值，并使用$next()将值分配给select旁边的输入。

＆＃13;

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

＆＃13;

<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>

＆＃13;

使用select2 jquery时，

更新肯定会让您的结构在dom上发生变化。显然我们也需要重构查询。请查看以下代码段以供参考。

＆＃13;

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

＆＃13;

<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>

＆＃13;

从多个选定下拉列表的数据属性中获取值（动态下拉列表）

1 个答案: