为何JavaScript中的oninput函数无法生效？附相关HTML代码

嘿，我一眼就发现问题啦！你给<select>下拉框用了oninput事件，但这个事件根本不是给下拉选择控件设计的哦～

oninput主要是针对文本输入类元素（比如<input type="text">、<textarea>），用来监听用户输入内容的实时变化。而对于<select>这种通过选择选项来改变值的控件，正确的监听事件应该是onchange。

给你两种解决方案： #

方案1：直接在HTML中绑定onchange事件 #

修改你的<select>标签，加上onchange属性：

<select name="vname" class="form-control" onchange="handleVendorSelect(this)">
  <option value="">Select Vendor</option>
  <?php foreach($Fetchvendors as $Fetch){ ?>
    <option value="<?php echo $Fetch->id;?>"><?php echo $Fetch->name; ?> </option>
  <?php } ?>
</select>

然后在页面的<script>标签里添加对应的处理函数：

function handleVendorSelect(selectEl) {
  // 获取选中的value和文本
  const selectedId = selectEl.value;
  const selectedName = selectEl.options[selectEl.selectedIndex].text;
  
  // 这里写你需要执行的逻辑，比如打印到控制台或者更新其他DOM元素
  console.log('选中的供应商ID：', selectedId);
  console.log('选中的供应商名称：', selectedName);
}

方案2：用JavaScript事件监听（更推荐，解耦HTML和JS） #

如果你不想在HTML里直接写事件绑定，可以用addEventListener来绑定change事件：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 找到对应的select元素
  const vendorSelect = document.querySelector('select[name="vname"]');
  
  // 绑定change事件
  vendorSelect.addEventListener('change', function() {
    const selectedId = this.value;
    const selectedName = this.options[this.selectedIndex].text;
    
    console.log('选中的供应商ID：', selectedId);
    console.log('选中的供应商名称：', selectedName);
    // 执行你的业务逻辑
  });
});

另外补充一点：如果你的<select>是通过AJAX等方式动态生成的（比如页面加载后才添加到DOM里），那上面的直接绑定可能会失效，这时候需要用事件委托，把事件绑定到父元素上，比如：

document.addEventListener('DOMContentLoaded', function() {
  // 绑定到父元素（比如.form-group或者document）
  document.querySelector('.form-group.col-sm-12').addEventListener('change', function(e) {
    // 判断触发事件的是不是目标select
    if(e.target.name === 'vname') {
      const selectedId = e.target.value;
      const selectedName = e.target.options[e.target.selectedIndex].text;
      console.log('选中的供应商ID：', selectedId);
      console.log('选中的供应商名称：', selectedName);
    }
  });
});

内容的提问来源于stack exchange，提问作者Akash Jha