如何通过下拉选项将表格关联值填充到Bootstrap弹窗非表单输入框中

Bootstrap 模态框默认渲染时会被插入到<body>根节点下，不属于原有表单的DOM子树，因此document.forms只能匹配到原表单内的元素，无法命中弹窗内的输入框，改用全文档DOM选择器直接定位目标元素即可解决。

具体实现步骤 #

• 给下拉框绑定change事件监听，触发时获取选中选项的所有自定义dataset属性
• 直接使用document.querySelector()或者document.getElementById()全文档定位弹窗内的目标输入框，不需要依赖document.forms
• 将获取到的dataset属性值赋值给对应输入框的value属性即可

完整代码示例 #

HTML 结构参考 #

<!-- 药品选择下拉框 -->
<select id="drugselect">
  <option value="1" data-stockqty="100" data-dunits="盒" data-cname="阿莫西林">阿莫西林</option>
  <option value="2" data-stockqty="50" data-dunits="瓶" data-cname="布洛芬">布洛芬</option>
</select>

<!-- Bootstrap 弹窗结构 -->
<div class="modal fade" id="drugModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="form-group">
          <label>药品名称</label>
          <input type="text" id="cname" class="form-control">
        </div>
        <div class="form-group">
          <label>库存数量</label>
          <input type="text" id="drginstock" class="form-control">
        </div>
        <div class="form-group">
          <label>药品单位</label>
          <input type="text" id="Drugunit" class="form-control">
        </div>
      </div>
    </div>
  </div>
</div>

JS 功能代码 #

// 监听下拉框选中事件
document.getElementById('drugselect').addEventListener('change', function() {
  // 获取当前选中的option节点
  const selectedOption = this.options[this.selectedIndex];
  // 提取自定义属性值
  const stockQty = selectedOption.dataset.stockqty;
  const dUnits = selectedOption.dataset.dunits;
  const cName = selectedOption.dataset.cname;

  // 直接全文档定位弹窗内的输入框赋值
  document.getElementById('cname').value = cName;
  document.getElementById('drginstock').value = stockQty;
  document.getElementById('Drugunit').value = dUnits;
});

注意事项 #

• 代码中的输入框选择逻辑是在下拉框选中事件触发时才执行，只要弹窗DOM在选中操作发生前已经渲染完成即可正常运行
• 如果弹窗是动态生成、选中下拉框时还未渲染的场景，可以把赋值逻辑绑定到Bootstrap模态框的shown.bs.modal事件上，弹窗打开时再读取当前选中的下拉框属性进行赋值
• 如果目标输入框没有设置id，也可以用document.querySelector('.modal .form-group input[name="Drugunit"]')这类选择器定位，只要保证选择器能唯一匹配到目标元素即可

内容的提问来源于stack exchange，提问作者Phillip Chirazo