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.

Answer 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();
}

Answer 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

Answer 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();

Answer 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

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

Answer 6

Try to disable that option with disabled attribute.

<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" disabled="disabled">Product 4</option>
</select>

Check demo

Answer 7

see this link

http://jsfiddle.net/DKKMN/

<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" id="i">Product 4</option>
</select>


#i{display:none;}

create an id and in style make it invisble

Answer 8

I suppose you are using JQuery as well.

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

Answer 9

to append the child below the list of option using java script.

`var option = document.createElement("option");
 option.text = "All Users";
 option.value = "all_user";
 var select = document.getElementById("log_user_type");
 select.appendChild(option);`

Answer 10

if you want to remove some option from select list you can use this code:

<script type="text/javascript">
    $(window).bind("load", function() {    
        $('#select_list_id option[value="AB"],option[value="SK"]').remove();
    });
</script>

Answer 11

<option value="4" style="display:none">Product 4</option> 

hides the 4th option by default.