Question

我需要你的帮助。

我使用下面的代码动态地向选择框添加选项。但是，如何使用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) }

即）。 [下拉式菜单] ACTIVE（文字颜色为绿色） ON HOLD（文字颜色为黄色） CLOSED（文字颜色为红色）

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

干杯，

杰

Answer 1

您可以单独设置每个元素的样式，也可以事先设置css类，只需将类名指定给元素。

请参阅此stackoverflow问题： Style Option in Selectbox using Javascript

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

可选择see how to dynamically create select with options：

样品：

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

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

    var option = document.createElement("option");
        // ex: Assign a css class to the option
        option.setAttribute('class', 'Your_CSS_Classname_Here');

        // ex: style the option inline
        option.style.fontWeight = 'bold';

        // set the value of the option
        option.setAttribute("value", status[i]);

        // set the text that displays for the option
        option.innerHTML = status[i];

    // add the option to your select dropdown
    select.appendChild(option);

}

Answer 2

也许是这样的：

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

没有接近测试或改进的地方。

选择框中的样式选项使用Javascript

2 个答案: