Hide Options from Multiple Selection Box
-
24-06-2021 - |
Вопрос
I need to hide certain options from Multiple selection box using Javascript. I can't got for jQuery, and I am not allowed to.
I have one more dropdown box, I am calling a js function which will be called upon change of the value. The js function will control the options of another multiple select options box, where I need to hide (not remove) options based on dropdown box value.
Any simple js function?
Edit: tried
fastInternet.options[i].style.display = 'none';
fastInternet.options[i].style.visibility = 'hidden';
Didn't work :(
Решение
I tried using your jsFiddle link but some of the stuff there was prevented the method from working correctly.
I made some modifications and it's working perfectly:
html:
<select id="option_two" multiple>
<option value="VOIP">VOIP</option>
<option value="BDS">BDS</option>
<option value="DMW">DMW</option>
<option value="IDTV">IDTV</option>
<option value="P3TR">P3TR</option>
</select>
Javascript:
var fastInternet = document.getElementById('option_two');
for ( var i = 0; i < fastInternet.options.length; i++) {
var value = fastInternet.options[i].value;
if(value == 'IDTV' || value == 'P3TR'){
fastInternet.options[i].style.visibility = 'hidden';
}
}
In JsFiddle, make sure that the framework is set to onLoad and No-Library(pure JS) In chrome it worked. But I got some problems in IE though :/
Другие советы
EDITED:
New Suggestion:
What about to make it disable
fastInternet.options[i].setAttribute("disabled", "disabled")
And then hide it by using following CSS:
select option[disabled] {
display: none; /* worked in firefox*/
visibility: hidden; /* worked in chrome*/
}
It might help!
OLD Suggestion:
Try to use
fastInternet.remove(options[i])
Adding display:none
worked for me. But I did it via css.
Have build an example. Check it here
Dont have chrome installed to test. But I guess visibility:hidden
should work.