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

Posted 2023-05-08

【中文标题】JS/jQuery：使用下拉框在另一个字段中设置值，是不是正在更改以前的字段？

【英文标题】：JS/jQuery: using dropdown box to set values in another field, is altering previous fields?JS/jQuery：使用下拉框在另一个字段中设置值，是否正在更改以前的字段？

【发布时间】：2021-07-03 18:06:12

【问题描述】：

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

现在，当用户选择销售套餐时，例如 packageA，它会在页面上的一个字段中预先填写该套餐的默认金额，例如 100 美元。在下一个下拉列表中，packageA 再次可供选择。在下一个下拉菜单中，如果用户选择PackageB，它会使用先前下拉菜单值 100 美元预填充金额，这不是正确的套餐价格吗？基本上，货币价值自动填充仅适用于页面上的第一个下拉选择框。在第一个下拉菜单中选择的内容会更改页面上所有其他软件包的货币字段值？

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

这个 html 下拉选择框在页面上重复了几次。

<!-- 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'));
  );

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

【参考方案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>

【讨论】：

绝对让我朝着正确的方向前进！谢谢！