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

How to get all select element in JQuery

本文关键字：select 元素 获取 JQuery      更新时间：2023-09-26

我有许多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有类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");
    }  
});

但这行不通。如何解决？

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

试试这个。。。

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

到目前为止，提供的所有解决方案都以这样一种方式"工作"，即向所需元素添加特定的类，但不会显示任何可见的结果/更改。因为浏览器(我确信chrome(不允许这样做。

然而，你可以做的closest(但不确切(的事情是使用另一个名为optgroup的标签，这将使你的文本加粗。

你可以像一样

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

这是小提琴。

试试这个，它应该可以

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

避免使用!important。不建议这样做，因为它可能会在其他地方引入新的错误

.hasClass(className)将返回true，如果集合中的任何元素都具有该类。似乎您所要做的只是过滤该类名。在这种情况下，您只需将其添加到选择器中，您的代码就会变成：

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

还要注意，我从.css调用中删除了"important"参数。通过jQuery将!important添加到css并不像看上去那么简单。

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

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