Ways to modify the header color of a card by utilizing a Select element in Javascript, while ensuring that it does not impact other cards

I am facing an issue with multiple cards, each containing a Select element. When a user selects an option from the Select element, the card header changes color, but it also affects all other card headers. How can I separate them?

    [data-background-color='empty'] {
      background-color: #595959;
      color: white;
    }

    [data-background-color='icu'] {
      background-color: #9933ff;
      color: white;
    }
    
    [data-background-color='med'] {
      background-color: #0066ff;
      color: white;
    }

<div class="card">
  <div class="card-header" data-background-color="empty">
    <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="unitSelect">

        <option selected value="0">Empty</option>
        <option value="1">ICU</option>
        <option value="2">Med</option>
        
     </select>
     <!--some other content-->
  </div>
</div>

$('#unitSelect').on('change', function() {
  switch ($(this).val()) {
    case '0':
      $('.card-header').attr('data-background-color', 'empty');
      break
    case '1':
      $('.card-header').attr('data-background-color', 'icu');
      break;
    case '2':
      $('.card-header').attr('data-background-color', 'med');
      break;
 }
});
javascripthtmlcssbootstrap-5

Answer №1

Instead of targeting $('.card-header'), consider using the parent() method on the select element that is being modified, like this: 

$(this).parent().attr('data-background-color', 'empty');

This approach will specifically change the .card-header of the select element undergoing modification.

$('.form-select').on('change', function() {
  switch ($(this).val()) {
    case '0':
      $(this).parent().attr('data-background-color', 'empty');
      break
    case '1':
      $(this).parent().attr('data-background-color', 'icu');
      break;
    case '2':
      $(this).parent().attr('data-background-color', 'med');
      break;
  }
});
[data-background-color='empty'] {
  background-color: #595959;
  color: white;
}

[data-background-color='icu'] {
  background-color: #9933ff;
  color: white;
}

[data-background-color='med'] {
  background-color: #0066ff;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card">
  <div class="card-header" data-background-color="empty">
    <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="unitSelect">

      <option selected value="0">Empty</option>
      <option value="1">ICU</option>
      <option value="2">Med</option>

    </select>
    <!--some other content-->
  </div>
</div>
<div class="card">
  <div class="card-header" data-background-color="empty">
    <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="unitSelect">

      <option selected value="0">Empty</option>
      <option value="1">ICU</option>
      <option value="2">Med</option>

    </select>
    <!--some other content-->
  </div>
</div>
<div class="card">
  <div class="card-header" data-background-color="empty">
    <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="unitSelect">

      <option selected value="0">Empty</option>
      <option value="1">ICU</option>
      <option value="2">Med</option>

    </select>
    <!--some other content-->
  </div>
</div>

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

The stylesheet's URL reference to the image is not functioning properly

I'm attempting to showcase images inside a table cell using CSS. Here's what I currently have: HTML: <td class="activity-status status_not_started">Not Started</td> CSS: td.activity-status { font: 0/0 a !important; color: transpar ...

css

Difficulty Establishing a Connection with SQL Server Using TypeORM

My local machine is running an SQL Server instance, but I'm encountering an error when trying to connect a database from TypeORM. The error message reads: originalError: ConnectionError: Failed to connect to localhost:1433 - Could not connect (seque ...

javascriptnode.jssql-serverexpresstypeorm

Error: The XML parsing in ASP failed to find a root element at the specified location

When clicking the button, I have jQuery/Ajax code that is supposed to pass the value of a selected radio button to a controller action and open a detail page. However, I am encountering an error. When using Mozilla Firefox, the console displays: XML Par ...

javascriptjqueryasp.netajaxasp.net-core

Dependency management in ReactJS components

I am grappling with the optimal structure for a React component that is composed of other components. Let's look at the first example: <ColorSelect id="color" label={this.state.selectLabel} trigger={{ color: "lime", text: "Lime"}} onPropagateCli ...

javascriptreactjs

How to Send a Multi-part Message Using AT Commands and PDU Mode in Node.js

I am trying to send a multipart message using AT commands. Single parts work fine, as do special characters. However, when the message exceeds 160 characters, it shows as sent but nothing is received. const async sendSMS(msisdn, message) { message += ...

javascriptnode.jsat-commandpdu

Angular 2 - Error: Regular expression missing forward slash syntax

Recently, I began working on an Angular 2 tutorial app using this repository. While I can successfully launch the app and display static content, I am facing challenges with rendering dynamic content from the component. I have a feeling that the error migh ...

javascripttypescriptangular

Encountered a problem while parsing an XML file using JavaScript from an external server

Currently, I am developing an iPhone application in HTML that needs to pull content from an XML file stored on a remote server and display it in a list. I have successfully accomplished this task when the XML file is hosted on the same server using the fo ...

javascriptxmlxmlhttprequest

What is the best method to find a matching property in one array from another?

I am working with two arrays in TypeScript. The first one is a products array containing objects with product names and IDs, like this: const products = [ { product: 'prod_aaa', name: 'Starter' }, { product: 'prod_bbb&apos ...

javascripttypescript

Run audio player in the background with Google Chrome Extension

I am working on an extension and I want to have a page with an audio player that continues to play even when I click outside of the extension. I tried using the "background" attribute in the manifest file, but it seems to only work with javascript files. ...

javascriptgoogle-chromebackground

Middleware in Express.js designed to alter the response object

One method I'd like to explore is using middleware functions to alter the response. app.use(function(request, response, next) { .. do something .. next(); // moves to next middleware }); When it comes to modifying the request and response ob ...

javascriptnode.jsexpressrequest

Developing an animated feature that displays a dynamic count up to the current size of the browser window

I have a script that's able to determine the height and width of my browser window. However, I am facing a challenge in creating a way for these dimensions to count up from zero to their current values upon loading. The desired functionality would be ...

javascriptjqueryhtmlcss

Generating a React User-Object in JSON Format

Imagine there is a back-end system using Node.js that allows the creation of users with specific attributes as shown below: POST http://localhost:8080/user Authorization: {{adminToken}} Content-Type: application/json { "userID": "test" ...

javascriptnode.jsreactjsjson

Missing Cookie in request using NodeJS and NextJS

Struggling with integrating cookies in a fullstack app I'm developing using Node for backend and NextJS for frontend on separate servers. The challenge lies in getting the browser to attach the cookie received in the response header from the node serv ...

javascriptnode.jscookiesnext.jssetcookie

Add the AJAX response to a div element when the submit button is pressed

Working on a WordPress project involving an AJAX call, I need to return the result of a row to a div with the ID #hero. The challenge is that since the result is inside a for loop and each row has its own hero div, I want the result to be returned to the c ...

phpjqueryhtmlajaxwordpress

What is the reason behind Q.js promises becoming asynchronous once they have been resolved?

Upon encountering the following code snippet: var deferred = Q.defer(); deferred.resolve(); var a = deferred.promise.then(function() { console.log(1); }); console.log(2); I am puzzled as to why I am seeing 2, then 1 in the console. Although I ...

javascriptangularjspromise

Prisma DB is a versatile database that excels in handling m-n

In my database, I have implemented a structure with 3 tables: Member, Characters, and MemberCharacters. Each member can have multiple Characters, and each Character can be used by multiple Members. To handle this many-to-many relationship, I have utilized ...

javascripttypescriptnext.jsprisma

The data display in MUI-Datatable is experiencing an issue where it is unable to read properties of undefined, specifically when trying to split the data

Whenever I include data within the MuiDatatable, it triggers this error: Cannot read properties of undefined (reading 'split') Is there a solution to this problem so that the data can be properly displayed? To demonstrate the issue, I have se ...

javascriptreactjsmaterial-uimui-datatable

Encountering an issue when making a POST request using JSON data

I've encountered an issue with my server.js file code. I'm trying to push JSON content into the user object, but I keep getting an error message. Can someone please help me identify where I've gone wrong? const express = require('expre ...

javascriptnode.jsjsonexpressweb

The Silent Disregard for CSS Files in React Rendered Pages

I'm currently working on a React application that I created using create-react-app. In my index.html file, I have linked it to my CSS file like this: <link rel="stylesheet" href="../src/site.css"></link> The content of the site.css file ...

cssreactjs

The AngularJS component materializes almost instantaneously

Using AngularJS, I have developed an application where a certain section of code is displayed after the page loads for a split second: <div class="col-sm-4" data-ng-repeat="user in users"> <div class="card"> ...

javascripthtmlangularjs