Question

我正在使用Javascript动态创建下拉菜单的选项元素，并想知道如何为它们添加一个类，以便我可以用CSS设置它们。

我有以下代码：

for (var i=0;i<portfolio.length-1;i++) {
    portfolioSelect.options[portfolioSelect.options.length] =
        new Option(portfolio[i]);
}

其中，投资组合是由外部来源填充的数组。

插入选项的HTML：

<select id="portfolio" name="portfolio">
    <option selected="selected" value="Select One">Select One</option>
</select>

Answer 1

您可以将类名分配给className属性，例如：

var opt;
for (var i=0;i<portfolio.length-1;i++) {
    opt = new Option(portfolio[i]);
    opt.className = "your_class_name_here";
    portfolioSelect.options[portfolioSelect.options.length] = opt;
}

任何DOM元素都是如此。 className反映了元素上的class属性（它的命名方式是因为class是Javascript中的保留字）。该值与属性完全相同，这意味着它可以用空格分隔多个类。

Answer 2

for (i=0;i<portfolio.length-1;i++) {
    var option = new Option(portfolio[i]);
    option.setAttribute('class', 'your-class-name');
    portfolioSelect.options[portfolioSelect.options.length] = option;
}

动态创建DOM对象并给出类

2 个答案: