$（this）.hide（）不处理IE8中的选项元素

问题描述

我的jquery代码有问题。我想使用jquery进行级联下拉列表。以下是我的代码。

HTML

 < SELECT class =input_stylename =comp_ddid =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_stylename =group_ddid =group_dd> 
< option data-parent = -  1value =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 （）; 
} 
其他
 {
 
 $（this）.hide（）; 
 
} 
} 
}）; 
} 
其他
 {
 $（'＃group_dd'）。children（）。each（function（）{
 $（this ）.show（）; 
}）; 
 } 
}）; 
}）; 
  

代码正常运行到 chrome和FF 但是无法使用 IE7 & IE8 。 .hide（）无效 IE7和IE8

提前致谢

答案:(由Paulo Rodrigues提供）

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（）; 
} 
} 
}）; 
} 
}）; 
  

解决方案

.hide（）会将样式显示更改为无，和IE不允许这样。所以我建议你删除这个元素。

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

解决方案

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

这篇关于$（this）.hide（）不处理IE8中的选项元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！