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.

Improve this question
1
  • can you try .hide() like $('#helloSellect option').hide(); Commented Aug 26, 2016 at 5:52

2 Answers 2

Reset to default
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).

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

The code in the question is already trying to use CSS to hide the option(s).
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>

Improve this answer

6 Comments

it is working in chrome just try it now. But not working in IE.
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.
I have a requirement like that, is there any otherway to achieve it in IE10.
No. This is the only solution, especially for a browser as old as IE10.
"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.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.