具有多个选择框的多种选项颜色

Multiple option colors with Multiple Select Box

本文关键字：选项 颜色 选择      更新时间：2023-09-26

您好，我有多个选择框，这些选择框将动态添加。

我在选择框下有 4 个选项，每个选项都有颜色编码。它适用于一个选择框。如果我有多个选择框，则颜色编码不起作用。请帮忙！

这是小提琴https://jsfiddle.net/p49g8p9h/

目录 

    <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>

你的代码中有两个问题。

1） 您有重复的选择元素的 ID。ID 必须是唯一的。您可以改用相同的类名。并改为按类名定位元素。

2）您正在单击处理程序中使用获取元素的对象。您应该在处理程序中使用当前元素上下文this。

完整片段： 

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

工作演示

检查这个工作更新的小提琴，你有重复的ID，所以这不起作用，你也可以用类来做 

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;
}
id对于

每个元素应该是唯一的。使用class redText而不是id如下所示。

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

演示

您对多个元素使用相同的 id，这是无法通过 id 获取所有元素的原因。

将所有 ID 更改为类，如下所示 -

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

使用this.className，以便仅采用值已更改的当前选择框

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

JSFiddle Demo

相关文章：