2

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?

http://jsfiddle.net/zz3dg/

Edit: tried

fastInternet.options[i].style.display = 'none';
fastInternet.options[i].style.visibility = 'hidden';

Didn't work :(

RaceBase
  • 18,428
  • 47
  • 141
  • 202
  • 1
    See if this post helps: http://stackoverflow.com/questions/2731668/how-to-hide-optgroup-option-elements – Clayton Aug 02 '12 at 10:57
  • Nothing worked. can any one write complete Js here. I am getting down for every new thread popping up with solution that doesn't work. – RaceBase Aug 03 '12 at 12:24

3 Answers3

2

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*/
}

SEE DEMO

It might help!

OLD Suggestion:

Try to use

 fastInternet.remove(options[i])
Ahsan Khurshid
  • 9,383
  • 1
  • 33
  • 51
  • Removing will delete the option from dropdown, which shouldn't happen. It should be just hidden for certain conditions and should be visible for other condtions – RaceBase Aug 02 '12 at 10:59
  • @Nitin Gurram: What about to make it `disable`, updated my answer. – Ahsan Khurshid Aug 02 '12 at 11:05
  • Nope, Just disable the options in IE8 – Ahsan Khurshid Aug 02 '12 at 11:56
  • might be using jQuery: http://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery OR http://stackoverflow.com/questions/2031740/hide-select-option-in-ie-using-jquery – Ahsan Khurshid Aug 02 '12 at 12:06
  • Nothing worked. can any one write complete Js here. I am getting down for every new thread popping up with solution that doesn't work – RaceBase Aug 03 '12 at 11:25
1

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.

Clyde Lobo
  • 9,126
  • 7
  • 34
  • 61
1

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 :/

Clayton
  • 457
  • 2
  • 8