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.

https://stackoverflow.com/a/24516786 – djvg Aug 12 '20 at 15:20 — djvg, Aug 12 '20 at 15:20

score 10 · Answer 1 · edited Feb 16 '16 at 22:27

10

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

edited Feb 16 '16 at 22:27

Blazemonger

90,923
26
142
180

answered Sep 11 '13 at 15:31

walterquez

349
2
11

3

That would create illegal HTML – mplungjan Apr 01 '14 at 04:35
I don't think "illegal" and "solution" have any relation or the world might look a lot different. But this might be an easier way to unwrap: $( "#selectlist span > option[value=4]" ).unwrap(); – user1566694 Oct 14 '15 at 17:58

score 5 · Answer 2 · answered Jul 15 '13 at 11:05

5

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

answered Jul 15 '13 at 11:05

Arun P Johny

384,651
66
527
531

Don't know why, but it doesen't work... I'm using the JQuery no.conflict method, but nothing... – user2132234 Jul 15 '13 at 12:50
@user2132234 if you are using noConflict then instead of `$` use `jQuery` – Arun P Johny Jul 15 '13 at 12:54
I'm using var $nol = jQuery.noConflict(); and change "$" with "$nol" in your function, is it the correct way? – user2132234 Jul 15 '13 at 13:06
@user2132234 yes it is – Arun P Johny Jul 15 '13 at 13:13
Here's the web url: http://provagas1860.opentur.it/destinazioni THe select list is on the right! – user2132234 Jul 15 '13 at 13:27
you have a js error fix it first `Uncaught TypeError: Cannot call method 'getElementsByTagName' of null ` – Arun P Johny Jul 15 '13 at 13:30
also where is the script added – Arun P Johny Jul 15 '13 at 13:32

score 5 · Answer 3 · answered Aug 12 '14 at 07:38

5

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

answered Aug 12 '14 at 07:38

sandeepghuge141

61
1
3

score 2 · Answer 4 · answered Nov 06 '15 at 09:58

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

score 1 · Answer 5 · answered Jul 15 '13 at 11:39

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.

? I need only to hide, I'm not interested to show options by clicking anywhere — user2132234, Jul 15 '13 at 12:49
Fine, the above "hides" the option. If you don't need to show it again, just remove it. — RobG, Jul 15 '13 at 23:28

score 0 · Answer 6 · answered Jul 15 '13 at 11:03

0

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

answered Jul 15 '13 at 11:03

Chirag Vidani

2,519
18
26

1

Disabling an option doesn't hide it, it just makes it not selectable. And the disabled attribute doesn't have a value. – RobG Jul 15 '13 at 11:14

score 0 · Answer 7 · answered Jul 15 '13 at 11:05

0

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

answered Jul 15 '13 at 11:05

1

This solution does not hide the option in IE11. – Russell G May 19 '14 at 22:53
1

Yeah, always ask yourself "This works, but what happens when Microsoft" – user1566694 Oct 14 '15 at 19:12

score 0 · Answer 8 · answered Jul 15 '13 at 11:08

0

I suppose you are using JQuery as well.

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

answered Jul 15 '13 at 11:08

sla55er

791
1
8
16

no errors, it simply shows the options like it have not any javascript script loaded – user2132234 Jul 15 '13 at 13:50
You are messing something up. Try doing it with in-line script instead. This is the way. It should work. – sla55er Jul 15 '13 at 14:03

sandeepghuge141 · Answer 9 · 2015-03-25T10:08:29.860

0

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);`

edited Mar 25 '15 at 10:08

answered Aug 14 '14 at 08:03

sandeepghuge141

61
1
3

score 0 · Answer 10 · answered Jan 18 '17 at 05:52

0

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>

answered Jan 18 '17 at 05:52

Sandeep Sherpur

2,418
25
27

score -3 · Answer 11 · edited May 23 '17 at 13:36

-3

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

hides the 4th option by default.

edited May 23 '17 at 13:36

kayess

3,384
9
28
45

answered May 23 '17 at 12:55

user8053687

1

1

[insert programming meme here] – Koni Oct 18 '17 at 15:51

How to remove/hide select options from select-list

11 Answers11

To save your time, please read the following answer.

Linked