如何根据下拉菜单enterReq的选择自动设置enterSLA的值？

核心逻辑 #

监听下拉菜单的change事件，根据选中的选项，自动给目标输入框赋值。

具体代码实现 #

在你的JavaScript代码中添加以下逻辑：

// 获取对应DOM元素
const enterReqSelect = document.getElementById('enterReq');
const enterSLAInput = document.getElementById('enterSLA');

// 定义选项与SLA值的对应关系
const slaMapping = {
  '选项1': 10,
  '选项2': 2
  // 后续新增选项可直接在这里扩展对应关系
};

// 给下拉菜单绑定change事件监听
enterReqSelect.addEventListener('change', function() {
  // 获取当前选中的选项文本
  const selectedText = this.options[this.selectedIndex].text;
  // 根据映射关系设置输入框的值
  if (slaMapping[selectedText]) {
    enterSLAInput.value = slaMapping[selectedText];
  }
});

优化建议 #

如果下拉选项的value属性有唯一标识（而非依赖选项文本），建议改用value匹配，避免后续选项文本修改导致逻辑失效：

const slaMapping = {
  'opt1': 10,
  'opt2': 2
};

enterReqSelect.addEventListener('change', function() {
  enterSLAInput.value = slaMapping[this.value] || '';
});

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