$ (this) .hide() nie działa na elementach opcjonalnych w IE8

Question

Mam problem w moim kodzie jquery. Chcę utworzyć listę rozwijaną kaskadową za pomocą jquery. Poniżej znajduje się mój kod.

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> 

kod jquery Kod

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

działa poprawnie w chrome and FF ale nie pracuje w IE7 & IE8. .hide() nie działa w IE7 and IE8

Proszę pomóż mi się go pozbyć.

góry dzięki

ODPOWIEDŹ: (podane przez Paulo Rodrigues)

kod JS:

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

Answer 1

.hide() zmieni styl wyświetlania sobie równych, a IE nie pozwalają to. Polecam więc usunąć ten element.

Answer 2

Czy można po prostu zrobić $ (this) .css ("display", "none"); ?

Answer 3

Użyj .detach() w 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(); 
     }); 
    } 
});​ 

Answer 4

Wolnostojący sposób jest o wiele bardziej skomplikowany sposób ... jeśli sklonować opcje (wszystkie opcje), a następnie dołączyć do wybierz opcje w zależności od wartości w onChange dokument gotowy, a nie usunąć() opcje, których nie chcesz związane z początkowego wyboru - w moim przypadku był to kraj do państw, ale dla przykładu rozwijanej własnego wyboru w celu określenia wartości Dwójki rozwijane ...

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

Zasadniczo masz i jeszcze, jeśli dla każdej wartości szukasz ... są inne sposoby, ale wydaje się to być najprostsze i można to zrobić w bardziej intuicyjny sposób, więc nie musisz określać inaczej, jeśli nie moim celem nie musiałem kopać tak głęboko, to był USA, Kanada lub tak ...

Answer 5

@pkachhia -> Mam znaleźć rozwiązanie, które działa dobrze dla mnie w IE8.Plz daj mi znać to to pomocne dla ciebie. Dziękuję.

jsfiddle.net/NehaBajoria/22pW4/