在下拉菜單中的不同選項上觸發不同的 JavaScript 功能

Question

我有簡單的下拉菜單

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

我想在選擇每個功能時觸發不同的 JavaScript 功能
例如，我想在選擇 Rigatoni 時提醒“Hello world”，並且我想在選擇 Dave 時提醒“我愛你”

function Hello() { 
alert("Hello world");
}

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

我知道我可以將值作為參數傳遞給 function，然后使用 if/else 但我必須避免在我的代碼中包含條件語句。
有什么辦法嗎？

Answer 1

 // declare function dictionary const fns = { rigatoni: Hello, dave: Love } function Hello() { alert("Hello world"); } function Love() { alert("I love you"); } // add event listener const names = document.querySelector('#dog-names').addEventListener('change', ({target}) => { // run function based on value fns[target.value]() })

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