How to Hide a ≪Option≫ in a ≪Select≫ Menu With Css

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 options with css

Use "" :[value="before"]

If you want to hide it from select remove selected="" from <option selected="" value="before">Before date</option>

option[value="before"]{display:none;}

<select class="_select">  <option value="">Indifférente</option>  <option value="1d">Today</option>  <option value="7d">This Week</option>  <option value="31d">This month</option>  <option  value="before">Before date</option></select>

How can I hide default <select> <option> when the drop-down is clicked?

To hide the default option, allowing the others to show, there are a few ways to go.

Unfortunately, you can't hide option elements in all browsers. Again, display:none; does not work in all browsers on options ...

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

Any simple HTML5 / CSS3 method for hiding selected option text?

So if you just want to hide the text in the currently selected option (when the dropdown is not 'expanded') then you can just set the width of the element.

select{  max-width:4em;  font-family:monospace;}

<select>    <option selected>USD (United States Dollar)</option>    <option>GBP (Great British Pound)</option>    <option>AUD (Australian Dollar)</option></select>

Hide option in jQuery-UI selectmenu

I solved it by extending the core jQuery UI javascript and css.

Example:

var $el = jQuery('option:contains("B")');$('#mySelect').selectmenu();
jQuery('#hide_option_b').click(function() {  $el.attr('hidden',true);  $('#mySelect').selectmenu('refresh');});jQuery('#show_option_b').click(function() {  $el.attr('hidden',false);  $('#mySelect').selectmenu('refresh');});

<link href="https://cdn.jsdelivr.net/gh/Eddcapone/custom_jquery-ui-1.12.1@master/jquery-ui.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/gh/Eddcapone/custom_jquery-ui-1.12.1@master/jquery-ui.js"></script>
<select id="mySelect">    <option id="aaa">A</option>    <option id="bbb">B</option>    <option id="ccc">C</option></select>
<button id="hide_option_b">Hide option B</button><button id="show_option_b">Show option B</button>

jQuery Hide options in a select list

(function($){  var $country = $('#Content_C003_Country');  var $state = $('#Content_C003_State');  var $stateOptions = $state.children();    $country.on('change', function(){    //remove the options    $stateOptions.detach();    //readd only the options for the country    $stateOptions.filter(function(){      return this.value.indexOf($country.val() + "-") === 0;    }).appendTo($state);    //clear out the value so it doesn't default to one it should not    $state.val('');  });}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select id="Content_C003_Country" class="searchFieldDrop">  <option value="36">Canada</option>  <option value="222">United States</option></select>
<select id="Content_C003_State" class="searchFieldDrop">  <option value="36-AB">Alberta</option>  <option value="36-BC">British Columbia</option>  <option value="36-MB">Manitoba</option>  <option value="222-AZ">Arizona</option>  <option value="222-AR">Arkansas</option>  <option value="222-CA">California</option></select>

How to Hide a ≪Option≫ in a ≪Select≫ Menu With Css