How to Hide Select Options With Javascript (Cross Browser)

How can I hide select options with JavaScript? (Cross browser)

Unfortunately, you can't hide option elements in all browsers.

In the past when I have needed to do this, I have set their disabled attribute, like so...

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

I've then used the hiding where it is supported in browsers using this piece of CSS...

select option[disabled] {
    display: none;
}

How to hide a <option> in a <select> menu with CSS?

You have to implement two methods for hiding. display: none works for FF, but not Chrome or IE. So the second method is wrapping the <option> in a <span> with display: none. FF won't do it (technically invalid HTML, per the spec) but Chrome and IE will and it will hide the option.

EDIT: Oh yeah, I already implemented this in jQuery:

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
            jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

EDIT 2: Here's how you would use this function:

jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option

EDIT 3: Added extra check suggested by @user1521986

Hide select option based on character in value on page load

You could get all the option elements, iterate over them, and check if the strings include *, if so, apply the styles.

document.querySelectorAll("option").forEach((x)=>{ if(x.innerText.includes("*")){     x.style.display = 'none';            x.style.visibility = 'none';        }})

<select id="variant2" name="variant2">    <option value="Size" selected="">Select Size / Option</option>              <option value="SMALL|15004">SMALL </option>    <option value="MEDIUM *|15005">MEDIUM *</option>    <option value="LARGE *|15006">LARGE * </option>    <option value="XLARGE|15007">XLARGE </option>    <option value="2XL|15008">2XL </option>    <option value="3XL|15009">3XL </option> </select>

Hide options in select tag

You wanted to get such a result?

$("#categorySelected option.class1").hide();

$("#categorySelected").change(function () {
  let index = $(this).prop('selectedIndex');
    if (index == 0) {
      $("#categorySelected option.class1").show();
    } else {}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="categorySelect" id="categorySelected">
  <option value="Select Category">Select Category</option>
  <option class = "class1" value="value1">value1</option>
  <option class = "class1" value="value2">value2</option>
  <option class = "class2" value="value1">value2</option>
  <option class = "class3" value="value2">value2</option>
</select>

How to Hide and Show SELECT Options with JQuery in IE

Hide and Show the Options based on Browser detection

Of many possible approaches, this method requires browser sniffing, which can be unstable, but on the other hand with this approach we don't have to swap in and out multiple copies of the same select list.

//To hide elements
$("select option").each(function(index, val){
    if ($(this).is('option') && (!$(this).parent().is('span')))
        $(this).wrap((navigator.appName == 'Microsoft Internet Explorer') ? '<span>' : null).hide();
});

//To show elements
$("select option").each(function(index, val) {
    if(navigator.appName == 'Microsoft Internet Explorer') {
        if (this.nodeName.toUpperCase() === 'OPTION') {
            var span = $(this).parent();
            var opt = this;
            if($(this).parent().is('span')) {
                $(opt).show();
                $(span).replaceWith(opt);
            }
        }
    } else {
        $(this).show(); //all other browsers use standard .show()
    }
});

Credit for this lies squarely with Dima Svirid here: http://ajax911.com/hide-options-selecbox-jquery/

Tampermonkey: Hide Options in Dropdown if they don't contain a string

To hide all options from the dropdown except the 2 specific options you can do the following. Note that as mentioned as comment by charlietfl that to hide options is not supported cross browser, so maybe it's an option for you to remove those options instead of hiding them as you mentioned that you don't need them.

var firstCampaignName = "001 - Campaign";
var secondCampaignName = "002 - Campaign";
$('#dropdown option').each(function() {
  if ($(this).text() === firstCampaignName || $(this).text() === secondCampaignName) {
    $(this).show();
  } else {
    $(this).hide();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown">
  <option value="1">001 - Campaign</option>
  <option value="2">002 - Campaign</option>
  <option value="3">003</option>
  <option value="4">004</option>
  <option value="5">005</option>
</select>