如何用JavaScript获取多下拉菜单值，移除关联输入框的disabled属性

我来帮你搞定这个下拉框联动控制输入框禁用状态的需求，核心思路是监听下拉框的change事件，根据选中的内容来切换对应输入框的禁用状态。下面分几种场景提供实现方案：

1. 基于内联事件的基础实现（匹配你的HTML示例） #

先完善你的示例HTML（补全缺失的部分）：

<div id="header_div">
  <select id="store_name_select" name="store_name_select" onchange="checkEnable(this,'store_name')">
    <option value="" selected="selected" disabled="disabled">请选择</option>
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </select>
  <p>
    <input disabled="" id="store_name" name="store_name" type="text" placeholder="输入店铺名称">
  </p>
</div>
<div>
  <select id="store_address_select" name="store_address_select" onchange="checkEnable(this,'store_address')">
    <option value="" selected="selected" disabled="disabled">请选择</option>
    <option value="yes">Yes</option>
    <option value="no">No</option>
  </select>
  <p>
    <input disabled="" id="store_address" name="store_address" type="text" placeholder="输入店铺地址">
  </p>
</div>

对应的JavaScript函数实现：

function checkEnable(selectElement, targetInputId) {
  // 获取当前下拉框选中的值
  const selectedValue = selectElement.value;
  // 找到关联的输入框元素
  const targetInput = document.getElementById(targetInputId);

  // 根据选中值判断是否启用输入框
  if (selectedValue === "yes") {
    targetInput.removeAttribute('disabled');
    // 可选：自动让输入框获得焦点，提升用户体验
    targetInput.focus();
  } else {
    targetInput.setAttribute('disabled', '');
    // 可选：清空输入框内容，避免残留无效值
    targetInput.value = '';
  }
}

这个函数可以复用给所有下拉框-输入框对，只需要在onchange事件里传递当前下拉框（this）和对应输入框的ID即可。

2. 基于选项索引的实现（如果需要按位置判断） #

如果你不需要根据value值，而是根据选中选项的位置（比如选中第二个选项时启用），可以修改函数逻辑：

function checkEnableByIndex(selectElement, targetInputId) {
  const selectedIndex = selectElement.selectedIndex;
  const targetInput = document.getElementById(targetInputId);

  // 索引从0开始，选中第二个选项（索引1）时启用
  if (selectedIndex === 1) {
    targetInput.removeAttribute('disabled');
    targetInput.focus();
  } else {
    targetInput.setAttribute('disabled', '');
    targetInput.value = '';
  }
}

3. 更优雅的事件监听方案（推荐） #

现代开发更推荐避免内联事件（onchange写在HTML里），可以用事件委托或批量绑定事件的方式，代码更易维护：

// 页面加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 批量获取所有符合规则的下拉框（ID以_select结尾）
  const allSelects = document.querySelectorAll('select[id$="_select"]');

  allSelects.forEach(select => {
    select.addEventListener('change', function() {
      // 从下拉框ID自动推导对应输入框的ID（比如store_name_select → store_name）
      const inputId = this.id.replace('_select', '');
      const targetInput = document.getElementById(inputId);

      // 切换禁用状态
      targetInput.disabled = this.value !== "yes";
      if (!targetInput.disabled) {
        targetInput.focus();
      } else {
        targetInput.value = '';
      }
    });
  });
});

这种方式不需要在HTML里写任何事件绑定代码，只要下拉框和输入框的ID遵循xxx_select和xxx的命名规则，就能自动联动，扩展性更强。

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