A plethora of color choices in a Multi-select Box

Question

A plethora of color choices in a Multi-select Box

Hi there! I am facing an issue with dynamically adding multiple select boxes.

Currently, I have 4 color-coded options under the selection boxes, which work fine when there is only one box. However, when I add more than one select box, the color coding doesn't seem to work properly. Can anyone help me with this problem?

You can find the sample code in this JSFiddle link.

Below is the HTML code snippet:

    <tr>
    <td class="tg-7khl">MAV_01</td>
    <td class="tg-7khl">Maveric Poster</td>
    <td class="tg-7khl">Maveric</td>
    <td class="tg-7khl">PRE,VIN,MUK</td>
    <td class="tg-7khl">14 Aug 2015</td>
    <td class="tg-7khl">
        <select id="stat" class="redText" style="padding: 3px; display:block;">
            <option class="redText">Yet to start</option>
            <option class="orangeText">In Progress</option>
            <option class="blueText">Waiting</option>
            <option class="greenText">To invoice</option>
        </select>
    </td>
    <td class="tg-7khl red">from 12 Aug 2015</td>
</tr>

javascript jquery html css

Answer 1

Answer №1

There are a couple of issues that need to be addressed in the code.

1) The select element IDs are duplicated, which is not allowed as IDs must be unique. It would be better to use the same class name and target elements by classname instead.

2) Instead of using the object of get elements in the click handler, it is recommended to use the current element context this in the handler.

Here is the full snippet:

var selectele = document.getElementsByClassName('stat');
  for(var i=0;i<selectele.length;i++)
    selectele[i].onchange = function () {
      this.className = this.options[this.selectedIndex].className;
    }
}

Check out the working demo here

Answer 2

There are a couple of issues that need to be addressed in the code.

1) The select element IDs are duplicated, which is not allowed as IDs must be unique. It would be better to use the same class name and target elements by classname instead.

2) Instead of using the object of get elements in the click handler, it is recommended to use the current element context this in the handler.

Here is the full snippet:

var selectele = document.getElementsByClassName('stat');
  for(var i=0;i<selectele.length;i++)
    selectele[i].onchange = function () {
      this.className = this.options[this.selectedIndex].className;
    }
}

Check out the working demo here

Answer 3

Answer №2

Make sure to check out this updated JSFiddle for a working solution. The previous code had issues with duplicating IDs, but you can also achieve the desired functionality by using classes.

var select = document.getElementById('stat');
select.onchange = function () {
    select.className = this.options[this.selectedIndex].className;
}
var select1 = document.getElementById('stat1');
select1.onchange = function () {
    select1.className = this.options[this.selectedIndex].className;
}
var select2 = document.getElementById('stat2');
select2.onchange = function () {
    select2.className = this.options[this.selectedIndex].className;
}

Answer 4

Make sure to check out this updated JSFiddle for a working solution. The previous code had issues with duplicating IDs, but you can also achieve the desired functionality by using classes.

var select = document.getElementById('stat');
select.onchange = function () {
    select.className = this.options[this.selectedIndex].className;
}
var select1 = document.getElementById('stat1');
select1.onchange = function () {
    select1.className = this.options[this.selectedIndex].className;
}
var select2 = document.getElementById('stat2');
select2.onchange = function () {
    select2.className = this.options[this.selectedIndex].className;
}

Answer 5

Answer №3

Each element should have a unique identifier called <code>id

. Instead of using id, it is recommended to use the class redText like shown below.

var select = document.getElementsByClassName('redText');

for (var i = 0; i < select.length; i++) {
    select[i].onchange = function () {
        this.className = this.options[this.selectedIndex].className;
    }
}

Check out the DEMO here

Answer 6

Each element should have a unique identifier called <code>id

. Instead of using id, it is recommended to use the class redText like shown below.

var select = document.getElementsByClassName('redText');

for (var i = 0; i < select.length; i++) {
    select[i].onchange = function () {
        this.className = this.options[this.selectedIndex].className;
    }
}

Check out the DEMO here

Answer 7

Answer №4

Using the same id for multiple elements can lead to issues when trying to retrieve all elements by id.

To fix this, consider changing all ids to classes like so:

<select class="stat redText" style="padding: 3px; display:block;">

Instead of using this.className, use the following code snippet to only target the current select box where the value has changed:

var select = document.getElementsByClassName('stat');
for(var i = 0; i < select.length; i++) {
  select[i].onchange = function () {
    this.className = this.options[this.selectedIndex].className;
  }
}

Check out the JSFiddle Demo for reference.

Answer 8

Using the same id for multiple elements can lead to issues when trying to retrieve all elements by id.

To fix this, consider changing all ids to classes like so:

<select class="stat redText" style="padding: 3px; display:block;">

Instead of using this.className, use the following code snippet to only target the current select box where the value has changed:

var select = document.getElementsByClassName('stat');
for(var i = 0; i < select.length; i++) {
  select[i].onchange = function () {
    this.className = this.options[this.selectedIndex].className;
  }
}

Check out the JSFiddle Demo for reference.

A plethora of color choices in a Multi-select Box

Answer №1

Answer №2

Answer №3

Check out the DEMO here

Answer №4

Similar questions

Display popup depending on the post's identification number

"jQuery's .each() method is only iterating through the last element in

Turn off drag and drop functionality and activate selection in HTML

When running 'npm run dev', an error occurred after the SizeLimitsPlugin emitted at 98%. The specific dependency that was

Mastering the usage of AngularJS Directive controllerAs syntax with scope is key to developing

A step-by-step guide on coding a slider image

What is the best way to link my PHP with MySQL in order to execute an AJAX query?

The Problem of Unspecified Return Type in Vue 3 Functions Using Typescript

Having trouble reaching an element within a successful Ajax call

AngularJS: Issue with scope not updating across several views

Error occurred during download or resource does not meet image format requirements

Encountering the error "ReferenceError: Cannot access 'data' before initialization" during deployment on Vercel

Error: The value being evaluated in document.getElementById(x).style is not an object and is not supported

Javascript: A Fun Game of Questions and Answers

Is there a way to load all movies in advance when none of the tags are selected?

Looking for assistance with implementing a jQuery function for an onClick event on

Applying Bootstrap Style to an Inline Select Element: A Step-by-Step Guide

The rendering of the .Net MVC DropDownList is not displayed properly when it is first set to be hidden

Encountering a parse error when making an AJAX call using structural functions

Depending on external software packages