Execute various JavaScript functions based on selections made in a dropdown menu

Question

Execute various JavaScript functions based on selections made in a dropdown menu

I am working on a simple dropdown menu

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

My goal is to execute different JavaScript functions based on the option selected. For instance, I want to display an alert saying "Hello world" when Rigatoni is chosen and show "I love you" when Dave is picked.

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

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

I understand that I could pass the selected value as a parameter to a function and use if/else statements, but I am looking for a way to achieve this without using conditional statements in my code.
Is there any solution for this?

javascript

Answer 1

Answer №1

// Function dictionary declaration
const functions = {
  rigatoni: Greet,
  dave: Affectionate
}

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

function Affectionate() {
  alert("I love you");
}
// Event listener addition
const names = document.querySelector('#dog-names').addEventListener('change', ({target}) => {
  // Execute function based on selected value
  functions[target.value]()
})

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

Answer 2

// Function dictionary declaration
const functions = {
  rigatoni: Greet,
  dave: Affectionate
}

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

function Affectionate() {
  alert("I love you");
}
// Event listener addition
const names = document.querySelector('#dog-names').addEventListener('change', ({target}) => {
  // Execute function based on selected value
  functions[target.value]()
})

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

Execute various JavaScript functions based on selections made in a dropdown menu

Answer №1

Similar questions

The situation where a Javascript switch case continues to fall through to the default case even when a 'break' statement

The JSX function seems to be malfunctioning, as the function part is not displaying on the webpage as intended

Find the position of an element in an array that includes a specific string value using JavaScript or Node.js

Leveraging the .reduce method to perform specific calculations and generate an object containing the results of an array

Is utilizing Promise.All more practical than async.each in this scenario?

Encountering issues when attempting to invoke a function from an external file in Angular4

What is the best way to target an iframe that includes "window.onclick" within its window?

Bundling and minifying Angular2 assets

The compatibility of Cross-Origin Requests with Socket.io in a Nginx + NodeJS setup is functioning incompletely

Managing JSON responses in the client-side view technology of SpringMVC

Issues with sending data using ajax

All nodes within the Angular ivh-treeview will automatically expand upon loading

Always keep the footer at the bottom of the viewport

Tips for updating specific properties of an object within a MongoDB database using arrays

Steps to trigger a message box in SharePoint 2010

Guide on how to receive multiple responses from a single ajax request in PHP

Ways to assign values to HTML table cells

Best practices for avoiding string concatenation in Oracle-db with Node.js

Guide on incorporating factories with Ionic/Angular JS while utilizing phonegap

In a NextJS and Vite app, what is the recommended value for setting `jsx`?