0

$('#inputTest').on('keyup', function() {
  $('#helloSellect option').css({
    display: "none"
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputTest">
<select id="helloSellect" multiple>
  <option>oye</option>
  <option>ram</option>
  <option>raj</option>
  <option>ban</option>
</select>

I would like to hide the options when user clicks any word in input box. In chrome it is working but not working in IE. What is the issue, and how to resolve it.

Kalu Singh Rao
  • 1,671
  • 1
  • 16
  • 21
Sandeep sandy
  • 387
  • 7
  • 14

2 Answers2

1

I don't think that the display:none is supported in all browsers as far as I can recall.. What you can try, though, is to disable the options not valid and then just add an entry to your css that defines that disabled entries should not be displayed.

Something like:

$('#helloSellect option').prop({'disabled': true});

and then add something like this to your css

select option[disabled] {
    display: none;
}

..or just remove the entries as stated above (unless you'll need them later).

vegaasen
  • 1,022
  • 7
  • 16
0

You can't really "hide" options in a <select> control using CSS. Chrome may allow it, but they're not actually gone. The only way to remove options is to actually remove the item from the DOM.

$('#helloSelect option').on('click', function() {
  $(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputTest">
<select id="helloSelect"  multiple>
  <option>oye</option>
  <option>ram</option>
  <option>raj</option>
  <option>ban</option>
</select>
Soviut
  • 88,194
  • 49
  • 192
  • 260
  • it is working in chrome just try it now. But not working in IE. – Sandeep sandy Aug 26 '16 at 05:45
  • The fact that it works in Chrome does not necessarily mean it's a good way to do it. Regardless, IE doesn't allow it so you have to remove the item in order to make it disappear from the list. – Soviut Aug 26 '16 at 05:46
  • I have a requirement like that, is there any otherway to achieve it in IE10. – Sandeep sandy Aug 26 '16 at 05:48
  • No. This is the only solution, especially for a browser as old as IE10. – Soviut Aug 26 '16 at 05:49
  • *"This is the only solution"* - No it isn't. The OP is trying to hide *all* of the options, so could instead just hide the whole select element (and display another, empty select in its place if required) - that way it is easy to show all the options again in response to some other event. – nnnnnn Aug 26 '16 at 06:09
  • I meant that removing items is the only reliable cross browser solution for "hiding" options and demonstrated it with an example. – Soviut Aug 26 '16 at 13:23