Question

我使用从db获取的下拉列表，并显示

尺码2 - 缺货 4号 - 股票 5号 - 缺货

如何通过js在库存文本上添加红色到缺货文本和绿色？

我的下拉：

<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
                    <option><?php echo $this->__('Choose an Option...') ?></option>
                  </select>

Answer 1

你所问的实际上很难做到。根据HTML规范， <option> 标记只能包含文字。这意味着您无法添加<span>或更好的内容，只能定位＆＃34; In Stock＆＃34; /＆＃34;缺货＆＃34;文本。

话虽如此，可以定位<option>元素本身的集合，控制颜色的最简单方法是为每个<option>分配一个{{1通过PHP输出它们。然后，您可以使用 .getElementsByClassName() 定位它们，循环显示它们，并通过 .style.color 设置文字颜色的样式。

＆＃13;

class

＆＃13;

var in_stock = document.getElementsByClassName('in_stock');
var out_of_stock = document.getElementsByClassName('out_of_stock');

for (var i = 0; i < in_stock.length; i++) {
  in_stock[i].style.color = 'green';
}

for (var i = 0; i < out_of_stock.length; i++) {
  out_of_stock[i].style.color = 'red';
}

＆＃13;

请注意，设置<select> <option class="in_stock">Size 2 - In Stock</option> <option class="out_of_stock">Size 5 - Out Of Stock</option> </select>元素的颜色不会设置默认选择颜色。为此，您需要直接定位<option>代码，可以使用 .getElementsByTagName() 来完成。您希望默认情况下将此颜色设置为第一个<option>，并在选择更改时将选中选项设置为：

＆＃13;

<option>

＆＃13;

var in_stock = document.getElementsByClassName('in_stock');
var out_of_stock = document.getElementsByClassName('out_of_stock');

for (var i = 0; i < in_stock.length; i++) {
  in_stock[i].style.color = 'green';
}

for (var i = 0; i < out_of_stock.length; i++) {
  out_of_stock[i].style.color = 'red';
}

/* Default <select> styling */
var the_select = document.getElementsByTagName('select')[0];
the_select.style.color = document.getElementsByTagName('option')[0].style.color;

/* Further <select> styling */
the_select.onchange = function() {
  the_select.style.color = the_select.options[the_select.selectedIndex].style.color;
}

＆＃13;

希望这有帮助！

下拉列表为自定义文本添加颜色

1 个答案: