Struggling to find a solution for changing the color of a select box when an option is chosen

Here's an example of the HTML I'm working with:

<select onclick="colorchanger()">
  <option name="white" value="0">--Select--</option>
  <option name="red" value="1">Work</option>
  <option name="green" value="2">Doesn't Work</option>
</select>

I am trying to change the color of the select box when an option is selected. While I know how to change the color based on the value, I specifically need to do it based on the name attribute. Could someone please provide guidance on how to achieve this functionality using JavaScript?

javascriptcolorsbackground

Answer №1

Consider trying out the solution below:

function switchColor(option){
  var color = option.options[option.selectedIndex].getAttribute('name');
  option.style.backgroundColor=color;
}
<select onclick="switchColor(this)">
  <option name="white" value="0">--Select--</option>
  <option name="red" value="1">Working</option>
  <option name="green" value="2">Not Working</option>
</select>

Answer №2

It is recommended to utilize the 'onchange' handler instead of changing the color with every click.

function adjustColor(select) {
  var chosenColor = select.options[select.selectedIndex].getAttribute('name');
  select.style.backgroundColor = chosenColor;
};
<select onchange="adjustColor(this);">
  <option name="white" value="0">--Select--</option>
  <option name="red" value="1">Work</option>
  <option name="green" value="2">Doesn't Work</option>
</select>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I make the footer on my webpage have a white background?

My goal is to create a white div that spans from point (A) to point (B) on the page, just like in the image. I aim for it to stretch all the way down to cover the entire browser without showing any gray background underneath, even when the page is scrolled ...

javascriptjqueryhtmlcss

A server-side rendered page in Next.js that functions without the need

Hey everyone, I'm curious about the best way to serve an HTML page in a Next Js application without relying on additional JavaScript. I need this because I want to make sure my webpage can be accessed by users who have older phones like Symbian or oth ...

javascriptreactjsnext.js

The JSON format in ASP.Net Core MVC does not have designated data fields

I am currently facing an issue with my JavaScript code related to cascading dropdowns. The setup involves having one dropdown for selecting a car brand and another dropdown for choosing a specific model under that brand. The functionality should work in su ...

javascriptjsonasp.net-mvcmodel-view-controllerasp.net-core-mvc

Changing tabs will redirect the url

Having an issue with ASP AjaxControlToolkit tabs. I want the URL to change based on the tab selected by the user. Check out the code snippet below: <asp:TabContainer ID="TabContainer1" runat="server" Width="100%" Height="100%"> <asp:TabPanel ...

c#javascriptjqueryasp.net

The component "react-native-snap-carousel" is having trouble displaying the card image

Recently, I started working with react native and encountered an issue while trying to implement the "react-native-snap-carousel". The carousel was functioning correctly with the data provided in the "carouselItems" array, but I faced difficulties with dis ...

javascriptreactjsimagereact-nativeslide

Loading bar for AngularJS material framework

Is there a way to integrate https://material.angularjs.org/latest/demo/progressLinear into my website so that it shows progress when a new view is loading? I'm trying to figure out how to obtain the value of the current page being loaded. Any suggest ...

javascriptangularjs

Validation script needed for data list selection

<form action="order.php" method="post" name="myForm" id="dropdown" onsubmit="return(validate());"> <input list="From" name="From" autocomplete="off" type="text" placeholder="Starting Point"> <datalist id="From"> <option ...

javascripthtmlhtml-datalist

Looping the Connection between Socket.io and Node

I have encountered a problem with my Unity client connecting to my node server using socket.io. While the initial connection is successful and acknowledged, when I try to emit a message to the connected client, the connection seems to get reopened as if a ...

javascriptnode.jsunity-game-enginesocket.io

retrieving JSON data within the controller

When I use the command console.log($scope.data), I am able to view my JSON file. Additionally, by using <div ng-repeat="item in data">, I can see all the items in the view. However, when I try console.log($scope.data[0]) or console.log($scope.data[0] ...

javascriptarraysjsonangularjs

Vuelidate allows for validation to occur upon clicking a button, rather than waiting for the field

As I navigate my way through learning vuelidate, everything seems to be going smoothly, except for one thing. I can't figure out how to trigger validation only when the "Submit" button is clicked. Currently, the fields turn red as soon as I start typi ...

javascriptvue.jsonclickvuelidate

The Enigmatic Essence of TypeScript

I recently conducted a test using the TypeScript code below. When I ran console.log(this.userList);, the output remained the same both times. Is there something incorrect in my code? import { Component } from '@angular/core'; @Component({ sel ...

javascripttypescript

Swapping out the default JavaScript random number generator for my custom JSON-based solution

I've been working on creating a D3 graph to display my data. After following a tutorial, I arrived at this particular piece of code: // 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a r ...

javascriptjsond3.js

Trouble persisting values with Heroku due to variable issues

Here is a concise example: let value = null; const getValues = () => { fetch('/third-party-api') .then(res => res.json()) .then(data => { value = data; }) } getValues(); app.get("/values", async (req, res) ...

javascriptnode.jsexpressheroku

Should I use a tooltip or a pop-up for the tablet version?

I'm currently working on a web application that involves presenting 10 questions, each with 3 possible answers. For each answer, I require a tooltip or popover that provides guidance. While I have attempted to use tooltips and popovers, there is an is ...

javascriptjqueryhtmltablet

Post request in ExpressJS fails to redirect user after submission

My current project involves developing a web application using NodeJS and ExpressJS. One issue I am encountering is with the login functionality on my website. After filling out the login form, the user's credentials are sent via a post request to the ...

javascriptnode.jsexpressposthttp-redirect

The event to close the HTTP connection in the Node server always triggers

I want to set up a close event that triggers before the server shuts down. To achieve this, I have implemented the following code: var express = require('express'); var app = express(); var http = require('http').Server(app); var list ...

javascriptnode.js

Sending the value from a for loop through AJAX and populating it into a form field

Currently, I have implemented a piece of JavaScript code that captures user input, sends a request to an endpoint using AJAX, and appends a specific field from the returned results as an option within a datalist. This functionality is working perfectly fin ...

javascripthtmljsonajax

Struggling to incorporate a logic in ajax using Cakephp2

I have a website built on CakePHP2 and I am looking to incorporate an Ajax function that will redirect to another URL if a specific PHP condition is met. Otherwise, it should display an error dialog. The tutorials I found on Google are quite complex for me ...

javascriptphpjqueryajaxcakephp-2.0

Struggling with integrating API response formatting in React and updating state with the data

This is the content found in the file 'Search.js' import React, { Component } from 'react'; import * as BooksAPI from './BooksAPI' class Search extends Component{ constructor(props){ super(props); this.state={ ...

javascriptreactjs

Unusual shadow cast by the box's silhouette

I am currently facing an issue with a box and its shadow. When I close the box, a different shadow lingers behind. I have tried troubleshooting this problem but cannot pinpoint the source. I have included the relevant code files in the specified folders. I ...

javascripthtmlcss