How to remove/hide select options from select-list

Question

I've got a select list like this:

<select id="selectlist" name="selectproduct" >
    <option value=""> --- Select product  --- </option>
    <option value="1">Product 1</option>
    <option value="2">Product 2</option>
    <option value="3">Product 3</option>
    <option value="4">Product 4</option>
</select>

Unfortunately I can't edit it. Is there any method which let me hide the "Product 4" option by default? I'm trying with CSS, but it doesn't work with IE.

Solution 1

To hide it, wrap it with a span tag.

$( "#selectlist option[value=4]" ).wrap( "<span>" );

To show it, unwrap the span tag if it has one.

if ( $( "#selectlist option[value=4]" ).parent().is( "span" ) ){
    $( "#selectlist option[value=4]" ).unwrap();
}

Solution 2

using css to hide options is not supported in IE, so you need to update the options list itself.

Try something like

$('#selectlist option[value=4]').remove();

Demo: Fiddle

or if you want to enable it later

var sel = $('#selectlist');
var opts = sel.find('option');

$(':checkbox').click(function(){
    sel.empty().append(this.checked ? opts : opts.filter('[value!=4]'));
}).click()

Demo: Fiddle

Solution 3

You can hide option using following line include in scripting.

    $("#selectlist option[value='4']").hide();

And if you want to again show this option use following line.

   $("#selectlist option[value='4']").show();

Solution 4

To save your time, please read the following answer.

OK, I searched for a few hours and I noticed that there is NO WORKING WAY to "hide" (what I mean is make the option temporally disappeared from the drop-down list) for all browsers, such as set the visibility to be hidden or style="display: none".

My final approach is: 1. Create an array to store all the options for the dropdown list. 2. Use a method to dynamically update the drop-down list according what you want to be shown.

That's it, if you want to use a drop down list without using any library

Solution 5

You can "hide" the option by moving it to a hidden select element or cached document fragment, then move it back when you want to show it:

var selectTool = (function() {
  var frag = document.createDocumentFragment();
  return {
    hideOpt: function (selectId, optIndex) {
      var sel = document.getElementById(selectId);
      var opt = sel && sel[optIndex];
      console.log(opt);

      if (opt) {
        frag.appendChild(opt);
      }
    },

    showOpt: function (selectId) {
      var sel = document.getElementById(selectId);
      var opt = frag.firstChild;
      if (sel && opt) {
        sel.appendChild(opt);
      }
    }
  }
}());

Then you can hide the 4th option like:

<input type="button" value="Hide option" onclick="
  selectTool.hideOpt('selectlist',4);
">

and show it again using:

<input type="button" value="Show option" onclick="
  selectTool.showOpt('selectlist');
">

All play code of course, but you should get some ideas. If you want to store many options, you'll need a way of referencing them so maybe store them in an object with some form of referencing scheme.

View more solutions