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

Utilize the RRule library in JavaScript by incorporating the rrule.min.js script

The term "GAPI" has not been declared or defined within the Svelte

Determining When the Collapse Transition in Material UI 5 is Complete

After implementing rewrites, my dynamic routes in Next.js are no longer functioning as expected

JavaScript Question: How can I extract the click value from a JavaScript visualization when displayed in a table?

Ever since updating my Node JS, the functionality of the MaterializeCSS carousel methods has ceased to work

Why do my tablet media queries take precedence over mobile view media queries?

PHP and XML encountered a parsing error: unexpected occurrence of the T_OBJECT_OPERATOR

Struggling to get my upload form to function properly with two different versions of jQuery, even after attempting to use jQuery.noConflict

Utilizing Browserify routes and configuring Webstorm

Is it possible to achieve 100% screen height by combining a fixed height div with a stretchy height div?

Angular 2 module transpilation services

Creating Json for jsTree can be done by following these steps

Ways to Read JSON without Using jQuery

Utilize the serialized data to pre-fill the form fields

Tips for emphasizing specific sections of text in CodeMirror utilizing substring positions

How to address critical vulnerabilities found in a Vue.js project that relies on the 'vue-svg-loader' dependency, specifically impacting 'nth-check', 'css-select', and 'svgo'?

Managing numerous asynchronous calls using jQuery

How can I adjust the size of my elements to be responsive in pixels

Designing a dynamic patterned backdrop that seamlessly extends for a column in bootstrap