Question

我有很多选择2种类型。类型A是我自定义的选择，类型B是默认选择在浏览器中但具有自定义背景。

我的CSS：

select {
    background: #fff url('down-arrow.png') no-repeat center right !important;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

A型：

<select class="positionAbsolute prefCodes" size="4">
     <option value>Select Preferred Code</option>
     <option value="1063473072">display 1 (NPI: 1063473072)</option>
     <option value="1104875822">display 2 (NPI: 1104875822)</option>
</select>

B类：

    <select class="formfield">
          <option value="select">Select</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option><option value="N/A">N/A</option>
    </select>

当页面加载时，我想使用jQuery加载所有select元素。如果select有类prefCodes，我想设置背景，因为它是none。此选项中没有值<option value>Select Preferred Code</option>的选项将添加bolder类。这是我的代码：

$(document).ready(function () {
    if ($("select").hasClass("prefCodes")){
       $(this).css("background","none","important");
       $(".prefCodes option[value=]").addClass("bolder");
    }  
});

但它不起作用。如何解决？

Answer 1

 <select class="positionAbsolute prefCodes" size="4">
    <option value=''>Select Preferred Code</option>
    <option value="1063473072">display 1 (NPI: 1063473072)</option>
    <option value="1104875822">display 2 (NPI: 1104875822)</option>
 </select>

<script>
 $(document).ready(function () {
    if ($("select").hasClass("prefCodes")){
       $(this).css("background","none","important");
          if($(".prefCodes option[value='']")) {
           $(this).addClass("bolder");
          }
       }  
    });
</script>

试试这个......

Answer 2

简单的答案是您不能将粗体样式应用于false元素。它不起作用。

到目前为止提供的所有解决方案＆＃34;工作＆＃34;以某种方式，他们将特定的类添加到所需的元素，但它不会显示任何可见的结果/更改。因为浏览器（我确信铬）不允许这样做。

然而，您可以执行的option（但不是确切的）是使用另一个名为closest的标记，这会使您的文字加粗。

你可以这样做

optgroup

这是the fiddle。

Answer 3

试试这个，它应该有用

 $(document).ready(function () {
       $("select.prefCodes").css("background","none"); 
       $(".prefCodes option[value=]").addClass("bolder");
    });

避免使用!important。它是not recommended，因为它可能会在其他地方引入新的错误

Answer 4

如果集合中的任何元素具有该类，则

.hasClass(className)将返回true。看起来你要做的就是过滤掉那个类名。在这种情况下，您只需将其添加到选择器，您的代码就会变为：

$(document).ready(function () {
    $("select.prefCodes").css("background","none");
    $("select.prefCodes option[value=]").addClass("bolder");
});

另请注意，我已从"important"调用中删除了.css参数。通过jQuery将!important添加到css是not as simple as it would seem。

您还可以将代码压缩成链，这样您就不必两次执行相同的DOM查找：

$(document).ready(function () {
    $("select.prefCodes").css("background","none")
                         .find("option[value=]")
                         .addClass("bolder");
});

如何获取JQuery中的所有select元素

4 个答案: