Drop-Down Lists in JavaScript

By: Rajesh P.S.

Drop-down lists, often referred to as select elements, are interactive HTML components that allow users to choose from a predefined set of options. JavaScript can be employed to enhance and manipulate these lists dynamically. Here's a more detailed explanation with examples:

Creating a Basic Drop-down List

<select id="colorSelect"> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> </select>

Browser View

In this example, a basic drop-down list is created with three color options: Red, Blue, and Green.

Changing Selected Option with JavaScript

Continue Reading...

const colorSelect = document.getElementById("colorSelect"); colorSelect.value = "blue"; // This sets "Blue" as the selected option

You can use JavaScript to change the selected option programmatically. In this case, the "Blue" option is selected using the value property.

Adding Options Dynamically

<select id="fruitSelect"> </select> <button onclick="addFruit()">Add Option</button> <script> function addFruit() { const fruitSelect = document.getElementById("fruitSelect"); const newOption = document.createElement("option"); newOption.value = "banana"; newOption.textContent = "Banana"; fruitSelect.appendChild(newOption); } </script>

Browser View

This example demonstrates how to add options dynamically to a drop-down list using JavaScript. Clicking the "Add Option" button appends a new option ("Banana") to the list.

Handling Events

<select id="animalSelect" onchange="displaySelected()"> <option value="cat">Cat</option> <option value="dog">Dog</option> <option value="rabbit">Rabbit</option> </select> <p id="result"></p> <script> function displaySelected() { const animalSelect = document.getElementById("animalSelect"); const result = document.getElementById("result"); result.textContent = `You selected ${animalSelect.value}`; } </script>

Browser View

In this example, the onchange event is used to trigger a JavaScript function when the user selects an option. The selected option is then displayed in a paragraph element.

Conclusion

Drop-down lists in JavaScript offer a powerful way to provide users with choices and interactivity. You can use JavaScript to manipulate the selected option, add new options dynamically, and respond to user actions through event handling.

Next > How do I include a JavaScript file in another JavaScript file?

Related Topics

More Related Topics.....