2

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

我正在使用 JQuery 选择菜单，我想做的就是为任何具有特定类的 OPTION 设置不同的样式。该类是“缺货”，所以我的代码如下；

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

任何指针将不胜感激，谢谢。

4

5 回答 5

0

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

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

而不是使用 

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

你应该使用

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

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

于 2012-11-12T14:00:40.120 回答
0

你快到了。尝试：

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

谨慎使用 !important。更多信息在这里

于 2012-11-12T14:04:46.257 回答
0

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

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

$('option.outOfStock').prop('disabled', true);
于 2012-11-12T14:40:36.943 回答
0

可能不是您正在寻找的答案，但在最坏的情况下，您始终可以使用内联样式，因为这将在选择标签上顺利工作......

  <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>
于 2012-11-12T15:03:46.670 回答
0

感谢所有建议，其中一些建议部分有效，但是这似乎在不同的浏览器中做了一致的工作，并且还涵盖了处于 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 向我展示了他们进来玩的所有风格。然后我可以清楚地看到样式的变化，因为菜单项处于各种状态、悬停、选中等。一旦你知道了要定位的样式/类，剩下的就很容易了……希望这对其他人有帮助。萤火虫来救援:)

于 2012-11-13T15:28:57.780 回答