2

我需要你的帮助。

我正在使用下面的代码向选择框动态添加选项。但是，如何使用 javascript 在选择框中为每个选项添加样式？并动态地做？

var status = new Array()
status[0] = ""
status[1] = "ACTIVE"
status[2] = "ON HOLD"
status[3] = "CLOSED"
for (i=0; i<status.length; i++) { document.getElementById('status').options[i]=new Option(status[i], i) }

ie.) [DROP DOWN MENU] ACTIVE (文字颜色为绿色) ON HOLD (文字颜色为黄色) CLOSED (文字颜色为红色)

感谢您的所有帮助和支持。

干杯，

周杰伦

4

2 回答 2

3

您可以单独设置每个元素的样式，也可以预先设置 css 类并将类名分配给元素。

请参阅此 stackoverflow 问题： 使用 Javascript 的 Selectbox 中的样式选项

看看这个小提琴：http: //jsfiddle.net/xdXFz/

（可选）查看如何使用选项动态创建选择：

样本：

var statuses = ["", "ACTIVE", "ON HOLD", "CLOSED"];
var elSelect = document.getElementById("status");

for ( var i = 0; i < statuses.length; i++ ){

    var elOption = document.createElement("option");
        // ex: Assign a css class to the option
        elOption.setAttribute('class', 'Your_CSS_Classname_Here');
        
        // ex: style the option
        elOption.style.fontWeight = 'bold';
        
        // set the value of the option
        elOption.setAttribute("value", statuses[i]);
        
        // set the text that displays for the option
        elOption.innerHTML = statuses[i];
    
    // add the option to your select dropdown
    elSelect.appendChild(elOption);

}
于 2012-10-11T16:52:35.633 回答
0

也许是这样的：

var status = new Array()
status[0] = ""
status[1] = "ACTIVE" 
status[2] = "ON HOLD" 
status[3] = "CLOSED"

var s1 = status[1];
var s2 = status[2];
var s3 = status[3];

if (s1) {
  //style here
}
else if (s2) {
  //style here
}
else if (s3) {
  //style here
}

for (i=0; i<status.length; i++) { document.getElementById('status').options[i]=new Option(status[i], i) }

几乎没有经过测试或改进。

于 2012-10-11T16:40:05.687 回答