$ (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>

Код запроса

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

Код

корректно работает в chrome and FF, но не работает в IE7 & IE8. .hide() не работает в IE7 and IE8

Пожалуйста, помогите мне избавиться от этого.

Заранее спасибо

ОТВЕТ: (предоставлено Пауло Родригесом)

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

Используйте .detach () в 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 3

@ pkachhia -> Я нашел решение, которое отлично работает для меня в IE8.Plz, дайте мне знать, это полезно для вас. Спасибо.

jsfiddle.net / NehaBajoria / 22pW4 /

Answer 4

Обособленный путь - намного более сложный путь ... если вы клонируете опции (все опции), а затем добавляете опции к выбору в зависимости от значения onchange в готовом документе, а затем удаляете () опции, которые вам не нужны, связанные с этим начальным выбором - в моем случае это была страна для штатов, но для вашего примера выпадающий список позволяет определить значения выпадающих двойок ...

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 5

Можете ли вы просто сделать $ (this) .css ('display', 'none');