如何在下拉菜单选择不同选项时触发不同JavaScript函数

可以用对象映射的方式实现，完全不需要if/else这类条件语句，直接把选项值和对应函数绑定，代码简洁直观：

完整代码示例 #

<select name="dog-names" id="dog-names">
  <option value="rigatoni">Rigatoni</option>
  <option value="dave">Dave</option>
</select>

<script>
function Hello() { 
  alert("Hello world");
}

function Love() {
  alert("I love you");
}

// 创建选项值与函数的映射表
const funcMap = {
  rigatoni: Hello,
  dave: Love
};

// 获取下拉框元素
const selectEl = document.getElementById('dog-names');

// 绑定change事件
selectEl.addEventListener('change', function() {
  // 直接通过当前选中值从映射表取函数并执行
  funcMap[this.value]();
});
</script>

原理说明 #

1. 先定义好需要触发的两个函数Hello和Love
2. 创建一个映射对象funcMap，把下拉选项的value作为对象的键，对应的函数作为值，建立一一对应关系
3. 监听下拉框的change事件，当选项切换时，获取当前选中的value，直接从映射对象中取出对应的函数并调用

如果后续需要新增选项，只需要在HTML里加<option>，同时在funcMap里新增一组键值对即可，扩展性很强，全程不需要任何条件判断语句。

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