$(this).hide() not working on option elements in IE8

Question

I have a problem in my jquery code. I want to make a cascading dropdown using jquery. Below is my code for it.

HTML

<SELECT class="input_style" name="comp_dd" id="comp_dd">
    <option value="0">[Select]</option>
    <OPTION value="1">Company1</OPTION> 
    <OPTION value="2">Company2</OPTION> 
    <OPTION value="3">Company3</OPTION> 
    <OPTION value="4">Company4</OPTION> 
</SELECT>

<SELECT class="input_style" name="group_dd" id="group_dd">
    <option data-parent="-1" value="0">[Select]</option>
    <OPTION  data-parent="1,3"; value="1" >grp_f</OPTION> 
    <OPTION  data-parent="1,2"; value="2" >grp_e</OPTION> 
    <OPTION  data-parent="1,3,4"; value="3" >grp_t</OPTION> 
</SELECT>

jquery code

$().ready(function() {  

    $('#comp_dd').change(function() {
       var parent = $(this).val();
      if(parent!=0)
      {
       $('#group_dd').children().each(function() {
         var listOfNumbers = $(this).data('parent');        
        if($(this).data('parent')!='-1')
        {   

             var numbers = listOfNumbers.split(',');            
             if(jQuery.inArray(parent, numbers)!=-1 )
             {               
                  $(this).show();
            }
            else
            {               

                 $(this).hide();

            }
        }       
       });
      }
      else
      {
        $('#group_dd').children().each(function() {
             $(this).show();
       });
      }
    });
});

code works correctly into chrome and FF but not working in IE7 & IE8. .hide() is not working in IE7 and IE8

Please help me to get rid of it.

Thanks in advance

ANSWER:(given by Paulo Rodrigues)

js code:

var original = $('#group_dd').clone();

$('#comp_dd').change(function() {
    var parent = $(this).val();

    $('#group_dd').empty().append($(original).html());

    if (parent != 0) {
        $('#group_dd').children().each(function() {
            var listOfNumbers = $(this).data('parent');        
            if ($(this).data('parent')!='-1') {
                var numbers = listOfNumbers.split(',');

                if (jQuery.inArray(parent, numbers)==-1 ) {
                    $(this).remove();
                }
            }
       });
    }
});

Duplicate: [Hide select option in IE using jQuery](http://stackoverflow.com/questions/2031740/hide-select-option-in-ie-using-jquery) (and a number of others). Apparently you can't hide options in IE, you have to remove them and re-add them later (e.g., `.detach()` and `.append()`). — nnnnnn, Feb 28 '12 at 12:07
check this http://forum.jquery.com/topic/hide-problem-on-ie8 — Amit Soni, Feb 28 '12 at 12:11
@Amit I have already check this and tried it, not working, thanks for help — pkachhia, Feb 28 '12 at 12:19
Also note that in IE `jQuery.inArray` implementation is different and won't convert types. In case of numeric parent data (e.g. `data-parent="3"`) the type of the data will be Number while the type of each item in the array will be String and you will get -1 even when it appears to be in the array. To overcome this, change the line to: `if(jQuery.inArray(parent + "", numbers)!=-1 )` — Shadow The GPT Wizard, Feb 28 '12 at 12:19
@ShadowWizard my problem is not jQuery.inArray, my problem is .hide() is not working. — pkachhia, Feb 28 '12 at 12:23
That's your *current* problem - but while looking into it, I also noticed what I mentioned. Just keep that in mind. :) — Shadow The GPT Wizard, Feb 28 '12 at 12:31
Please help me, nobody there who has face this problem before? Is this problem has no solution? — pkachhia, Feb 28 '12 at 12:50
possible duplicate of http://stackoverflow.com/questions/2031740/hide-select-option-in-ie-using-jquery — footy, Apr 03 '12 at 07:16
@pkachhia -> I have find the solution which is working fine for me in IE8.This is demo link [Demo](http://jsfiddle.net/NehaBajoria/22pW4/).Plz let me know is it helpful for you.Thank you. http://jsfiddle.net/NehaBajoria/22pW4/ — Neha, Dec 10 '13 at 08:27
It still seems to be a problem with IE11 and this was the neatest solution I could find. I hadn't really used the clone function before but I may do again. Thanks to Paulo. — Alan Gee, May 15 '14 at 15:02

score 6 · Accepted Answer · answered Feb 28 '12 at 12:07

6

.hide() will change style display to none, and IE not allow this. So I recommend you remove this element.

answered Feb 28 '12 at 12:07

Paulo Rodrigues

5,273
7
35
58

I remove this element as per your suggestion, but what is the alternative for it? What I will use instead of it? – pkachhia Feb 28 '12 at 12:35
1

@Chicko Because if you remove element on 'hide', you need create again on 'show'. Check [this code](http://jsfiddle.net/PXTk7/1/). – Paulo Rodrigues Feb 28 '12 at 12:56

score 1 · Answer 2 · answered Feb 28 '12 at 12:13

1

Use .detach() in jquery.

DEMO

$('#comp_dd').change(function() {
    var parent = $(this).val();
    if (parent != 0) {
        $('#group_dd').children().each(function() {
            var listOfNumbers = $(this).data('parent');
            if ($(this).data('parent') != '-1') {
                var numbers = listOfNumbers.split(',');
                if (jQuery.inArray(parent, numbers) != -1) {
                    $(this).show();
                }
                else {
                    alert($(this).val()+" detached");
                    $(this).detach();
                }
            }
        });
    }
    else {
        $('#group_dd').children().each(function() {
            $(this).show();
        });
    }
});

answered Feb 28 '12 at 12:13

footy

5,803
13
48
96

I have tried your code, it works once but not second time. Thanks for help – pkachhia Feb 28 '12 at 12:20
I mean once you select company1 it works correctly but when you second time select company1, it doesn't give you the same result. – pkachhia Feb 28 '12 at 12:31
if element are detached, the second time it does not work simply because it is a new element created, which was not there on document ready, so the selector does not hit it... to make it repeatedly work like this you need .live() in jQuery, see http://api.jquery.com/live/ – Peminator Oct 29 '12 at 11:03

score 0 · Answer 3 · answered Apr 03 '13 at 14:13

The detached way is a much more complicated way... if you clone the options (all options) and then append the options to the select depending on the value of the onchange within the document ready, and than remove() the options you do not want related to that initial choice - in my case it was country to states but for your example dropdown one's choice to determine dropdown twos values...

var cloneone = $('#IDVALUE option').clone();
var dropdown1_value = $('#dropdown1').val();
$('#dropdown1').change(function(){
if(dropdown1 == 'value you want here')
{
cloneone.appendTo('#dropdown2');
$('#dropdown2 option.OPTIONS_WITH_CLASS_YOU_WANT_TO_NOT_SHOW').remove();
}
});

essentially have and else if for each value you are looking for... there are other ways but this seemed to be the most simple and you could do it in a more intuitive way so you do not have to specify the else if but for my purpose I didn't need to dig that deep, it was US, Canada or else so...

if possible can you provide jsfiddle link for your example? – pkachhia Apr 04 '13 at 04:37 — pkachhia, Apr 04 '13 at 04:37

Neha · Answer 4 · 2013-12-10T08:47:30.073

0

@pkachhia -> I have find the solution which is working fine for me in IE8.Plz let me know is it helpful for you.Thank you.

jsfiddle.net/NehaBajoria/22pW4/

edited Dec 10 '13 at 08:47

answered Dec 10 '13 at 08:28

Neha

170
5

Thanks Neha for your effort, but as you can see above, I have already got my answer before. – pkachhia Dec 16 '13 at 04:49

$(this).hide() not working on option elements in IE8

4 Answers4

Linked