如何通过下拉选项控制输入框禁用属性及JS函数失效排查

嘿，这个问题我熟！你遇到的是浏览器对<option>元素onclick事件的兼容性限制——大多数主流浏览器都不会触发<option>的点击事件，这就是为啥按钮能正常跑函数，但下拉选项点了没反应的原因。

我给你整理了完美的解决方案，既能保留你原来的按钮功能，又能让下拉选项正常触发输入框的禁用/解锁操作：

第一步：明确核心需求对应的完整代码（补全你未写完的部分） #

假设你的页面里有一个需要控制的输入框，原始代码大概是这样的：

<div class="btn-group">
  <button onclick="myFunction()" class="btn btn-success">Disable</button>
  <button onclick="myFunction1()" class="btn btn-success">Unlock</button>
</div>
<select class="">
  <option onclick="myFunction()">Disable</option>
  <option onclick="myFunction1()">Unlock</option>
</select>
<!-- 被控制的输入框 -->
<input type="text" id="myInput" placeholder="请输入内容">

第二步：替换成兼容的实现方式（用<select>的onchange事件） #

把<option>的onclick删掉，转而给<select>绑定onchange事件，通过选项的value来区分要执行的操作：

<div class="btn-group">
  <button onclick="myFunction()" class="btn btn-success">Disable</button>
  <button onclick="myFunction1()" class="btn btn-success">Unlock</button>
</div>
<!-- 修改后的select：添加onchange事件，给选项设置value -->
<select class="" onchange="handleSelectAction(this)">
  <option value="">请选择操作</option>
  <option value="disable">Disable</option>
  <option value="unlock">Unlock</option>
</select>
<input type="text" id="myInput" placeholder="请输入内容">

第三步：编写对应的JavaScript逻辑 #

保留你原来的myFunction和myFunction1，新增一个处理下拉选择的函数：

// 原来的禁用输入框函数
function myFunction() {
  document.getElementById("myInput").disabled = true;
}

// 原来的解锁输入框函数
function myFunction1() {
  document.getElementById("myInput").disabled = false;
}

// 处理下拉选择的函数
function handleSelectAction(selectEl) {
  const selectedOption = selectEl.value;
  // 根据选中的value调用对应的函数
  if (selectedOption === "disable") {
    myFunction();
  } else if (selectedOption === "unlock") {
    myFunction1();
  }
  
  // 可选：如果希望重复选择同一个选项也能触发，可以重置选中状态
  // selectEl.value = "";
}

为什么这样可行？ #

<select>的onchange事件是所有浏览器都支持的标准事件，当用户选中不同的选项时就会触发。我们通过给每个选项设置唯一的value，就能轻松区分要执行的操作，完美替代原来不兼容的<option onclick>写法。

如果需要重复选择同一个选项也能触发函数（比如选了Disable之后再选Disable还能执行），只需要把上面代码里的selectEl.value = "";注释打开就行，这样每次选完后下拉框会回到默认的“请选择操作”选项，下次再选就能再次触发事件啦。

内容的提问来源于stack exchange，提问作者スペースタイム