Change Background Color Of Select Option Using JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of change background color of select option using JavaScript, the backdrop colour of the choices in a dropdown select menu is one frequent adjustment.
Using JavaScript we can use this for enabling us for dynamically change the appearance of web page as per our need or interaction.
We will use JavaScript to access the choose element and its options in order to modify the background colour of the select options.
Then, to call our own function, we will watch for the change event on the choose element.
We will check which one is selected within this function and adjust the backdrop colour accordingly.
Step By Step Guide On Change Background Color Of Select Option Using JavaScript :-
<!DOCTYPE html>
<html>
<head>
<title>Background Color</title>
</head>
<body>
<h2>Select a Color:</h2>
<select name="colors" onchange="changeColor(this)">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
<script>
function changeColor(event) {
var color = event.value;
document.getElementsByTagName('BODY')[0].style.backgroundColor = color;
}
</script>
</body>
</html>
- A straightforward dropdown <choose> element with four colour choices—Red, Blue, Yellow, and Green—makes up the HTML structure.
- The onchange attribute of the select> element is set to changeColor(this). This attribute indicates that if a user chooses a different option from the available dropdown, the changeColor method should be invoked.
- The changeColor method, which is called when a user chooses an item from the dropdown, is contained in the JavaScript code.
- Using the event parameter, we first record the event that caused the changeColor function to run. The value of the chosen option is one of the details about the event that are contained in the event object.
- The chosen colour value is then extracted from the event using event.value and put into the colour variable.
- Using style.backgroundColor=color, we set the background color of the body element to the color which we selected.
Conclusion :-
In this article, we learned how we can use JavaScript to change the background colour of page by selecting options.
For adding a interactive way of web application for user experience using customizing the page by selecting the options.
Creating a stylish user interface that complements the design and theme of our website by experimenting with various colour schemes and design elements.
Changing the background colour of specific options is just one of the numerous ways you can make your web application stand out thanks to JavaScript's versatility and capability.
The example JavaScript code shows a simple method for altering the background colour of the <body> element according to the choice made in a drop-down menu.
When you wish to give customers the option to dynamically modify the general theme or colour scheme, this method might be a beneficial addition to online apps.
You can expand on this idea as you learn more about web programming to produce more complex and interactive features.
For instance, you may increase the colour selection, add animations or transitions to the background colour change, or use the chosen colour on only certain page elements.
Due to JavaScript's flexibility, there are countless options for modifying user interfaces and developing captivating user experiences.
I hope this article on change background color of select option using JavaScript helps you and the steps and mentioned above are easy to follow and implement.
About Amruta
