$ (this) .hide() не работает над элементами опции в IE8

У меня проблема с кодом 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(); 
     }); 
     } 
    }); 
});

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

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

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

ОТВЕТ: (учитывая Пауло 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(); 
       } 
      } 
     }); 
    } 
});

источник

2012-02-28 pkachhia

Дубликат: [Скрыть выберите опцию в IE с помощью JQuery] (http://stackoverflow.com/questions/2031740/hide-select-option-in -ie-using-jquery) (и ряд других). По-видимому, вы не можете скрыть параметры в IE, вы должны удалить их и повторно добавить их позже (например, '.detach()' и '.append()'). – nnnnnn

У вас есть дополнительный '});' последним. Его синтаксическая ошибка. – footy

проверьте этот http: //forum.jquery.com/topic/hide-problem-on-ie8 –

.hide() изменит стиль отображения непревзойденными, и IE не позволяют это. Поэтому я рекомендую удалить этот элемент.

источник

2012-02-28 12:07:29

Я удаляю этот элемент в соответствии с вашим предложением, но что это за альтернатива? Что я буду использовать вместо этого? – pkachhia

@Chicko Потому что, если вы удаляете элемент в 'hide', вам нужно создать снова на 'show'. Проверьте [этот код] (http://jsfiddle.net/PXTk7/1/). –

Большое спасибо, вы решили мою проблему – pkachhia

Может ли у вас просто $ (это) .css ('display', 'none'); ?

источник

2012-02-28 12:08:27 Luc

Это в основном то, что делает '.hide()' и не работает в IE. Посмотрите на вопрос: [Скрыть опцию выбора в IE с помощью jQuery] (http://stackoverflow.com/questions/2031740/hide-select-option-in-ie-using-jquery) – nnnnnn

Я уже пробовал, не работает, спасибо за вашу помощь – pkachhia

Мой плохой. Как насчет .css ('visibility', 'hidden')? – Luc

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

источник

2012-02-28 12:13:27 footy

Я пробовал свой код , он работает один раз, но не второй раз. Спасибо за помощь – pkachhia

Я имею в виду, когда вы выбираете компанию1, она работает правильно, но когда вы второй раз выбираете компанию1, она не дает вам такого же результата. – pkachhia

Хорошо, я жду вашего ответа – pkachhia

Отсоединенный путь гораздо более сложный путь ... если вы клонировать опции (все опции), а затем добавить опции к выбрать в зависимости от значения 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(); 
} 
});

по существу есть и еще, если для каждого значения, которое вы ищете ... есть другие способы, но это казалось самым простым, и вы могли бы сделать это более интуитивно понятным способом, поэтому вам не нужно указывать другое, если только для моей цели мне не нужно было копать в глубине, это были США, Канада или еще так ...

источник

2013-04-03 14:13:25 Joe

, если возможно, вы можете указать ссылку jsfiddle для своего примера? – pkachhia

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

jsfiddle.net/NehaBajoria/22pW4/

источник

2013-12-10 08:28:40 Neha

Спасибо Neha за ваши усилия, но, как вы можете видеть выше, я уже получил свой ответ раньше. – pkachhia

$ (this) .hide() не работает над элементами опции в IE8

ответ

Смежные вопросы