联动数据库下拉框：选中支付项自动填充对应金额至输入框

嗨，我来帮你搞定这个需求！要实现选中下拉框里的付款类型后自动填充对应的金额，我们可以通过HTML数据属性结合JavaScript事件监听来完成，不用额外发起后端请求，简单高效。下面是具体的步骤和代码修改：

步骤1：修改下拉框选项，存储对应金额 #

首先，我们需要把每个付款类型对应的金额（monto）存储在下拉框的选项上，这里用HTML5的data-*属性来实现，这样前端可以直接读取这个值，不用再去后端查数据。

修改你原来的PHP生成选项的代码：

<div class="form-group">
  <label class="col-sm-2 control-label" for="Old">Tipo de pago* </label>
  <div class="col-sm-10">
    <select class="form-control" id="pagos" name="pagos" >
      <option value="" >Selecciona pago</option>
      <?php 
      $sql = "select id, rubro, monto from pagos"; 
      $q = $conn->query($sql); 
      while($r = $q->fetch_assoc()) { 
          // 新增data-monto属性，把对应金额存在选项上
          $selectedStatus = ($pagos == $r['id']) ? 'selected="selected"' : '';
          echo '<option value="'.$r['id'].'" data-monto="'.$r['monto'].'" '.$selectedStatus.'>'.$r['rubro'].'</option>'; 
      } 
      ?>
    </select>
  </div>
</div>

步骤2：添加金额输入框（如果还没有） #

假设你还没有用于显示金额的输入框，添加一个（如果已有，确保它有唯一的id，比如下面的montoInput）：

<div class="form-group">
  <label class="col-sm-2 control-label" for="monto">Monto*</label>
  <div class="col-sm-10">
    <!-- 设置readonly是为了防止用户手动修改，不需要的话可以去掉这个属性 -->
    <input type="number" class="form-control" id="montoInput" name="monto" readonly>
  </div>
</div>

步骤3：编写JavaScript实现自动填充 #

添加一段JavaScript代码，监听下拉框的change事件，当选中项变化时，把对应的金额填充到输入框里。同时处理页面加载时默认选中的情况，避免页面刚加载时默认选项的金额没显示：

<script>
// 获取下拉框和金额输入框的DOM元素
const pagosSelect = document.getElementById('pagos');
const montoInput = document.getElementById('montoInput');

// 监听下拉框的选中变化事件
pagosSelect.addEventListener('change', function() {
    // 获取当前选中的选项
    const selectedOption = this.options[this.selectedIndex];
    // 读取选项上存储的金额值
    const targetMonto = selectedOption.getAttribute('data-monto');
    // 把金额填充到输入框，没有选中有效选项时清空输入框
    montoInput.value = targetMonto || '';
});

// 页面加载完成后，自动填充默认选中项的金额
window.addEventListener('load', function() {
    const initialSelectedOption = pagosSelect.options[pagosSelect.selectedIndex];
    if (initialSelectedOption) {
        montoInput.value = initialSelectedOption.getAttribute('data-monto') || '';
    }
});
</script>

补充说明 #

• data属性的优势：直接把金额存在选项上，响应速度快，适合数据不频繁变动的场景；如果之后需要添加更多关联数据，只需要新增对应的data-*属性即可。
• 兼容性：data-*属性和原生事件监听都是现代浏览器普遍支持的特性，不需要依赖jQuery之类的第三方库。
• 灵活性：如果需要允许用户修改金额，只需要去掉输入框的readonly属性就行。

内容的提问来源于stack exchange，提问作者Ricardo Rafael Rivas