Handlebars模态框选择商品后自动填充价格输入框的实现方法

没问题，我来帮你搞定这个需求！要实现选择商品后自动填充价格，我们需要两步走：给下拉选项绑定对应商品的价格数据，然后监听下拉框的选择事件来更新价格输入框。

第一步：修改下拉选项，存储商品价格 #

你当前的<option>只显示了商品名称，没有携带价格信息，所以首先要在Handlebars的循环里给每个选项加上价格数据，推荐用data-price属性来存储：

<div class="modal-body">
  <div>
    <label for="type">article</label>
    <select id="article" name="article" class="form-control">
      {{#each articles}}
        <!-- 给option添加data-price属性，存储当前商品的price -->
        <option data-price="{{price}}">{{name}}</option>
      {{/each}}
    </select>
  </div>
  <!-- 其他输入框保持不变 -->
  <input type="text" class="form-control" name="desc" id="desc" placeholder="Description" value="{{desc}}">
  <input type="text" class="form-control" name="quantity" id="quantity" placeholder="Qté commandée" value="{{quantity}}">
  <input type="text" class="form-control" name="price" id="price" placeholder="Prix Unitaire" value="{{price}}">
  <input type="text" class="form-control" name="tax" id="tax" placeholder="Taxes" value="{{tax}}">
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Quité</button>
  <button type="button" name="add" id="add" onclick="isValid()" class="btn btn-primary" data-dismiss="modal">Ajouter</button>
</div>

第二步：添加JavaScript监听选择事件 #

接下来需要写一段JS代码，监听下拉框的change事件，当用户选择不同商品时，把对应价格填充到#price输入框里。你可以把这段代码放在页面底部（或者模态框初始化完成后）：

// 获取下拉框和价格输入框元素
const articleSelect = document.getElementById('article');
const priceInput = document.getElementById('price');

// 监听下拉框的change事件
articleSelect.addEventListener('change', function() {
  // 获取当前选中选项的data-price值
  const selectedPrice = this.options[this.selectedIndex].dataset.price;
  // 把价格赋值给价格输入框
  priceInput.value = selectedPrice;
});

额外优化（可选） #

如果你的商品数据里还有描述（desc）、税率（tax）这些字段，也可以用同样的方式自动填充其他输入框，比如给option加上data-desc="{{desc}}"、data-tax="{{tax}}"，然后在change事件里一并赋值：

articleSelect.addEventListener('change', function() {
  const selectedOption = this.options[this.selectedIndex];
  priceInput.value = selectedOption.dataset.price;
  document.getElementById('desc').value = selectedOption.dataset.desc;
  document.getElementById('tax').value = selectedOption.dataset.tax;
});

这样用户选商品的时候，相关的字段就都自动填好了，体验会更好~

内容的提问来源于stack exchange，提问作者hamdi islam