JS/jQuery: 使用下拉框在另一个字段中设置值，是否正在更改以前的字段？

Question

我的页面有多个下拉菜单供员工选择 select 销售包，这些下拉菜单完全相同。

现在，当用户 select 的销售包说 packageA 时，它会在页面上预填一个字段，其中包含该包的默认金额，例如 100 美元。在下一个下拉列表中，packageA 再次可用于 selection。在下一个下拉列表中，如果用户 selects PackageB 它会使用之前的下拉列表值 $100 预填充金额，这不是正确的套餐价格吗？基本上，货币价值自动填充仅适用于页面上的第一个下拉 selection 框。第一个下拉列表中 select 的任何内容都会更改页面上所有其他包裹的货币字段值吗？

我知道在这种情况下通过 ID 获取元素效率不高，但通过 className 获取元素根本不起作用。

这个 HTML 下拉 select 框在页面上重复了几次。

<!-- this is the dropdown -->
<select id="package-dropdown" class="selectpicker pkg-class">
    <option value="">Select</option>
    <option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}. 
    <option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}. 
    <option data-value="{{ django ID here }}" value="{{ django value here}}">{{django variable here}}. 
    </option>
</select>

<!-- where the monetary value gets prefilled -->
<div class="col-sm-5">
    <input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
</div>


// JS on change function
   

 $(document).on('change','#package-dropdown', function(e) {
      let package = document.getElementById("package-dropdown");
       // This is where the price gets prefilled based off of the package selected
      $(".display-package-amount").val(package.options[package.selectedIndex].getAttribute('data-value'));
  });

我在如何使这些实际上彼此独立到每个 select 框与 previous/next 框真正无关的地方苦苦挣扎。任何提示将不胜感激！

Answer 1

您不能在页面中重复 ID，因此请改用类。

要获取关联的输入，请使用 closest() 遍历到一个共同的父级，然后 find() 您在该父级中需要的内容

$(document).on('change', '.selectpicker', function() {
  $(this).closest('.row').find('.display-package-amount').val(this.value)
})

.row {
  padding: 1em;
  border: 2px solid #ccc;
  margin: 1em
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <select class="selectpicker pkg-class">
    <option value="">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <hr/>
  <div class="col-sm-5">
    <input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
  </div>
</div>
<div class="row">
  <select class="selectpicker pkg-class">
    <option value="">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <hr/>
  <div class="col-sm-5">
    <input min="0" type="number" class="display-package-amount" class="form-control" placeholder="Amount">
  </div>
</div>

JS/jQuery: 使用下拉框在另一个字段中设置值，是否正在更改以前的字段？

JS/jQuery: using dropdown box to set values in another field, is altering previous fields?

javascript

html

jquery

bootstrap-selectpicker

这个 HTML 下拉 select 框在页面上重复了几次。