Code functioning correctly in Chrome but encountering issues in Firefox

I've come across an issue with my HTML and JavaScript code for a select drop-down box. My goal is to have the background color of the selected option update to match the color selected by the user.

Currently, when using Firefox, the hover color changes to blue when you hover over an option and then the selected background color changes accordingly. However, when testing the same code in Chrome, it works as intended by using the selected option's background color.

How can I ensure cross-platform compatibility and make this work consistently on all browsers?

    $("#color_me1").change(function(){
        var color = $("option:selected", this).css("background-color");
        $("#color_me1").css("background-color", color);
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Color One:</label>
    <select id="color_me1" name="color1">
        <option disabled selected value> -- select color -- </option>
        <option value="800000" style="background-color:#800000">Maroon</option>
        <option value="FF0000" style="background-color:#FF0000">Red</option>
        <option value="FFA500" style="background-color:#FFA500">Orange</option>
        <option value="FFFF00" style="background-color:#FFFF00">Yellow</option>
        <option value="808000" style="background-color:#808000">Olive</option>
        <option value="008000" style="background-color:#008000">Green</option>
        <option value="800080" style="background-color:#800080">Purple</option>
        <option value="FF00FF" style="background-color:#FF00FF">Fuchsia</option>
        <option value="00FF00" style="background-color:#00FF00">Lime</option>
        <option value="008080" style="background-color:#008080">Teal</option>
        <option value="00FFFF" style="background-color:#00FFFF">Aqua</option>
        <option value="0000FF" style="background-color:#0000FF">Blue</option>
        <option value="000080" style="background-color:#000080">Navy</option>
        <option value="808080" style="background-color:#808080">Gray</option>
        <option value="FFFFFF" style="background-color:#FFFFFF">White</option>
    </select>
    <br>

https://i.sstatic.net/DeyzN.png

javascripthtmlcss

Answer №1

Uncertain of the reason for this behavior, but the following solution is effective:

$("#color_me1").change(function(){
    var color = $("option:selected", this).get(0).style.backgroundColor
    $("#color_me1").css("background-color", color);
});

Alternatively, the same functionality can be achieved using JavaScript:

$("#color_me1").change(function(){
     var selectedOption = this.selectedOptions[0]
     var color = selectedOption.style.backgroundColor
    $("#color_me1").css("background-color", color);
});

https://codepen.io/anon/pen/NELLNx

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

What could be causing the error when attempting to send an HttpResponse from a Django View function?

Trying to utilize Ajax, I'm attempting to call a Django View function from JavaScript code. The View function is expected to return an HttpResponse, which should then be printed out on the console. However, upon inspection of the console, it simply s ...

javascriptpythonajaxdjangopython-3.x

Identify the position of a mouse click event when dots overlap

Experience this live demo on CodePen by visiting it here. 1) When you click on the grid, a first red point will be added. 2) Click on the grid again to add a second red point. 3) By clicking back on the first red point, you may notice that the coordinat ...

javascripthtmlcss

HapiJS commences an extended duration background process

Is there a way to achieve the functionality of a PHP exec function in HapiJS? I have a scenario where the user submits a processing job that requires running in the background for a significant amount of time. An essential requirement is to provide the us ...

javascriptphpnode.jshapi.js

Creating MySQL query results in Node.js manufacturing process

I am looking to format the MySQL result in Node.js in a specific way. The desired result format should look like this: [ { "m_idx" :1 , "contents" : { "m_name" : "a", ...

javascriptnode.js

Transmit parameters via onclick event on FullCalendar

I have been utilizing the full calendar feature and it's been functioning properly. However, I am encountering an issue with sending parameters via onclick event. Below is the JavaScript code that I currently have: <script> $(document).ready(fu ...

javascriptphpfullcalendar

How to apply class binding within a v-for loop in Vue.js

When using Vuejs3, I am currently iterating through an array of objects: <div v-for="ligne in lignes" :key="ligne.id" :class="{ 'border-b-2':isSelected }" :id="`ligne_${ligne.id}`" > ...

javascriptvue.jsvuejs3v-for

Sharing an array between two sibling components

Within my 'Home' component, users have the ability to create QR codes. I have implemented a method that generates an array of these QR items. Now, the challenge lies in passing this array to another component that is a sibling and not located wit ...

javascriptvue.js

"Alert box displaying error message is not appearing on the screen

In order to display an error message using a tooltip, I have hidden the tooltip by setting the style of a span with an id of demo to display:none. Then I use JavaScript's getElementById method to retrieve the value of the input field with an id of use ...

javascripthtmlcsstooltip

Vanilla JS method for resetting Bootstrap 5 client-side validation when focused

I'm currently exploring Bootstrap 5's client-side validation feature. However, I've encountered a usability issue with the is-invalid class. After clicking the submit button, this class persists until the correct input is entered. I would li ...

javascripthtmlcsstwitter-bootstrap

Tips for sending a file rather than a json object in nextjs

Is there a way to send a file from either route.ts or page.ts, regardless of its location in the file-system? Currently, I am using the following code in my back-end python + flask... @app.route("/thumbnail/<string:filename>") def get_file ...

javascripttypescriptnext.js

Is the data missing in the initial request?

After creating a function that returns an object with mapped values, I encountered an issue. The second map is undefined the first time it runs, causing my vue.js component to display data from the first map but not the cutOff value. Strangely, when I re ...

javascriptvue.jsvuejs2

Is it possible to trigger an event just once?

Is there a way to ensure an event only fires once? I recently discovered that using .one seems to do the trick. ...

javascriptjquerydom-events

Guide to periodically updating and displaying a <b-img> element in VueJS

Recently delving into the world of JS and Vue. Within my Bootstrap-Vue project, there's an image element that looks like this: <b-img src="/api/camera" fluid alt="camera"></b-img> Whenever the page is refreshed, the br ...

javascripthtmlvuejs2bootstrap-vue

CSS - using numbers to create dynamic background images

I am looking to create a design where the background images in CSS display increasing numbers per article, like this example: This idea is similar to another post on Stack Overflow discussing using text as background images for CSS. You can find it here: ...

javascriptjqueryhtmlcss

``Implementing a method to save the output of an asynchronous request in a global variable for future manipulation

It's been a week and I still can't figure this out. Being new to front-end development, I'm struggling with storing the response from subscribe in a global variable for future use. ngOnInit(): void { this.http.get<APIResponse>('ur ...

javascriptangulartypescript

Ways to remove a dynamic field with jquery

I have developed a script that allows me to add dynamic fields and delete them as needed. However, I am facing an issue where I cannot delete the first element with the "el" class in my script because it removes all elements within the "input_fields_cont ...

javascriptjquerylaravellaravel-blade

The login function in Nativescript Vue successfully returns a true value

Hello, I am currently using a function that is quite similar to this one with some minor tweaks here. However, I have encountered an issue when trying to log in to my REST API. Even if I input the incorrect username or password, it still authenticates me ...

javascriptvue.jsnativescript

Dealing with errors in a sequelize ORM query: Tips and tricks

Currently, I am implementing Sequelize ORM in my Node/Express project using Typescript. Within the database, there is a 'users' table with a unique column for 'email'. As part of my development process, I am creating a signIn API and ...

javascriptnode.jsexpresssequelize.jsbackend

Apply borders to the table provided in the email using Python

Presently, I am utilizing this approach for sending tables in emails via Python instead of attaching them: Send table as an email body (not attachment) in Python import smtplib from smtplib import SMTPException import csv from tabulate import tabulate te ...

pythonhtmlemailsmtplib

Show one marker on the map from a GeoJson file

On my webpage, I have a Google map that displays all markers using the map.data.loadGeoJson method. Each marker is linked to its respective details page with the following code: map.data.addListener('click', function(event) { var id = even ...

javascriptjsongoogle-mapsgoogle-maps-api-3geojson