How to get all select element in JQuery

Question

I have many select in 2 types. Type A is a custom my select, and type B is default select in browser but has custom background.

My CSS:

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

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

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

When the page load, I want to use jQuery load all select element. If select has class prefCodes, I want to set background for it is none. And option in this with no value <option value>Select Preferred Code</option> will add bolder class. Here my code:

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

But it's not work. How to resolve it?

score 1 · Accepted Answer · answered Sep 23 '15 at 03:35

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

try this...

score 1 · Answer 2 · answered Sep 23 '15 at 04:03

Simple answer is you can't apply bold styles to the option elements. It will not work.

All the solutions provided so far "work" in a way that they add specific class to the desired element but it won't show any visible result/change. Becuase browsers (I'm sure about chrome) do not allow this.

The closest (but not exact) thing you can do, however, is to use another tag called optgroup this will bolden your text.

You can do it like

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

Here is the fiddle.

score 1 · Answer 3 · edited May 23 '17 at 12:22

1

try this, it should work

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

Avoid using !important. It is not recommended as it might introduce new bugs in some other places

edited May 23 '17 at 12:22

Community

1
1

answered Sep 23 '15 at 04:05

Vignesh Subramanian

7,161
14
87
150

score 0 · Answer 4 · edited May 23 '17 at 12:22

0

.hasClass(className) will return true if any of the elements in the collection has that class. It seems like all you want to do is filter on that class name instead. In that case, you can simply add it to the selector and your code would become:

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

Also notice that I removed the "important" parameter from the .css call. Adding !important to css via jQuery is not as simple as it would seem.

You can also condense the code into a chain so you don't have to do the same DOM lookup twice:

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

edited May 23 '17 at 12:22

Community

1
1

answered Sep 23 '15 at 02:46

Stryner

7,288
3
18
18

Thanks about your solution and your explain. I try with your code and it success to add `background: none` to `select.prefCodes`. But it can select a option with no value, no class `bolder` in this option. – Pham Minh Tan Sep 23 '15 at 02:53
@PhamMinhTan [It appears to be working for me](http://jsfiddle.net/n3pjy6n6/1/). What issue are you having? – Stryner Sep 23 '15 at 03:18
Hi @Stryner. I found this my issue. When this code is run, my select is not rendered. But i put this code in `$(document).ready(function () {`. Why? – Pham Minh Tan Sep 23 '15 at 03:28
@PhamMinhTan Oh yeah, that still needs to be included. Because if you have the script higher in the page (like in ``) it will execute before it renders the DOM below it. So the elements won't exist yet and it won't find them. The [`$(document).ready`](https://learn.jquery.com/using-jquery-core/document-ready/) forces it to run after the document has been loaded. – Stryner Sep 23 '15 at 03:42

How to get all select element in JQuery

4 Answers4