Question

您好我有多个动态添加的选择框。

我在选择框下面有4个选项，每个选项都有颜色编码。一个选择框可以正常工作。如果我有多个选择框，则颜色编码不起作用。请帮忙！

HTML

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

Answer 1

您的代码中有两个问题。

1）您有select元素的重复ID。 ID必须是唯一的。您可以使用相同的类名。而是通过classname来定位元素。

2）您在点击处理程序中使用了get元素的对象。您应该在处理程序中使用当前元素上下文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;
    }
}

<强> Working Demo

Answer 2

检查这个工作更新的fiddle你有重复的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;
}

Answer 3

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

DEMO

Answer 4

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

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

<div>
Test
</div>

使用<select class="stat redText" style="padding: 3px; display:block;">，这样只需要更改值的当前选择框

this.className

<强> JSFiddle Demo

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

4 个答案:

DEMO