Question

可能只是一个简单的人，但我真的很挣扎。如果有人能提供帮助或建议，我将非常感谢，谢谢。

我正在使用JQuery selectmenu，我想要做的就是为任何具有特定类的OPTION设置不同的样式。这个类是“outofstock”，所以我的代码如下;

<select name="dd1" id="dd1">
    <option value="1">item 1</option>
    <option value="2" class="outOfStock">item 2</option>
    <option value="3">item 3</option>
</select>

我希望第二个选项有class =“outOfStock”，用不同的文字或BG颜色设置样式。

我已尝试过很多（很多，很多）变种，但却无法让任何事情发挥作用。

<style type="text/css">
.ui-selectmenu-menu-item .outOfStock{background:red;}
</style>

任何指示都将不胜感激，谢谢。

Answer 1

你可以试试这个，这很简单：

  $('.outOfStock').css('color','#454545');

而不是使用

  <style type="text/css"></style>

你应该使用

 <script type="text/javascript"></script>

因为你想运行jQuery而不是css样式。

Answer 2

你快到了。尝试：

<style type="text/css">
    .outOfStock {
         background-color: red !important; // changed following comments
    }
</style>

谨慎使用！重要。更多信息here

Answer 3

CSS在样式select及其后代option元素方面几乎无用，因为它们通常由操作系统/平台呈现，而不是浏览器本身。

但是，您可以使用disabled属性来区分它们：

$('option.outOfStock').prop('disabled', true);

Answer 4

可能不是您正在寻找的答案，但在最糟糕的情况下，您可以随时使用内联样式，因为它可以在选择标记上顺利运行...

  <select name="dd1" id="dd1">
    <option value="1">item 1</option>
    <option value="2" style="background:red;">item 2</option>
    <option value="3">item 3</option>
  </select>

Answer 5

感谢所有的建议，其中一些是部分工作的，但是这似乎在不同的浏览器中做了一致的工作，并且还涵盖了SELECTED状态的项目

.ui-selectmenu-menu .outOfStock{background:red;} /* item in the list */
.outOfStock .ui-selectmenu-status{background:red;color:#333}  /* item when selected */

此提示可能有助于某人尝试查找.ui样式... 我花了很多时间来研究在各种菜单状态（打开，悬停，选择）中涉及哪些.ui样式 - 最后我意识到我所要做的就是打开Chrome（或Firefox），设置Firebug，右击我的元素（在这种情况下是我的选择菜单项）并选择“检查元素”。 Firebug然后向我展示了他们进场时的所有风格。然后我可以清楚地看到样式随着菜单项处于各种状态而变化，悬停，选择等等。一旦你知道要定位的样式/类，其余的就很容易了......希望这对其他人有帮助。拯救萤火虫：）

JQuery selectmenu如何以不同的方式设置一些选项

5 个答案: