$(this).hide()无法处理IE8中的选项元素

Question

我的jquery代码有问题。我想使用jquery制作一个级联下拉列表。下面是我的代码。

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代码

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

代码在CCD_ 1中正常工作，但在IE7&IE8。.hide()在IE7 and 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();
                }
            }
       });
    }
});

Answer 1

.hide（）会将样式显示更改为none，IE不允许这样做。因此，我建议您删除此元素。

Answer 2

在jquery中使用.destrict（）。

演示

$('#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 3

分离的方式要复杂得多。。。如果你克隆选项（所有选项），然后根据文档中onchange的值将选项附加到select，然后删除（）你不想与初始选择相关的选项-在我的情况下，这是国家对国家的选择，但对于你的下拉列表，一个人的选择决定了下拉列表的两个值。。。

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

本质上有，否则如果对于你正在寻找的每个值。。。还有其他方法，但这似乎是最简单的，你可以用一种更直观的方式来做，这样你就不必指定其他方法，如果但出于我的目的，我不需要深入挖掘，是美国、加拿大还是其他地方…

Answer 4

@pkachia->我在IE8中找到了对我来说很好的解决方案。Plz让我知道它对你有帮助吗。非常感谢。

jsfiddle.net/NehaBajoria/22pW4/