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

问题:

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();
                }
            }
       });
    }
});

回答1:

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

回答2:

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();
        });
    }
});​

回答3:

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...

回答4:

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