Почему jQuery hide()/show() ruin HTML select в Chrome?

Question

Я пишу jira-плагин, и мне нужно изменить customfield на экране создания проблемы. Я использую jQuery для этого. У меня проблема с jQuery hide/show методы, используемые на html select в Chrome (под Firefox работает хорошо). Проблема в том, что у меня есть 3 разных блока выбора, параметры которых зависят от опции, выбранной в предыдущей. У меня есть функция, чтобы подготовить следующий список выбора, когда предыдущий изменился.

function prepareList(code, list) { 
    list.children('option').each(function() { 
     if(jQuery(this).text() == code || jQuery(this).text() == 'None') { 
      jQuery(this).show(); 
     } 
     else { 
      jQuery(this).hide(); 
     } 
    }); 
} 

код является строкой, которая является JQuery («# previous_select варианта: выбрано»). Текст() Он отлично работает во многих случаях, но иногда изменяет список опций. Хуже того, когда следующий список имеет только один вариант, он не отображается. Я вижу, что у него есть отображение: inline в html-коде, но после того, как я нажму на select triangle, выпадающий список имеет 2 px.

Забавный факт заключается в том, что он отлично работает в Firefox.
IE 8 даже не скрывает/показывает, но это просто IE, поэтому я могу это понять.
Opera 12.16 не скрывает/показывая также.
Safari 5.1.7 для Windows также не скрывает/показывает.

Вопрос в том, какие методы следует использовать для достижения моей цели? Я попробовал jQuery (это) .css ('display', 'none/inline') тоже, и он не работает.

EDIT: JSFiddle: jsfiddle.net/7KRLE/

Answer 1

Я нашел решение. Похоже, что jQuery hide/show запутывает Chrome и другие браузеры (часть из них не позволяет скрывать/показывать). Ответ заключается в том, чтобы использовать jQuery.detach() и сохранить список в массиве. Если вам нужен весь список, вам просто нужно его перестроить из массива, используя jQuery.append() на ваш выбор HTML. Это хорошо работает в Chrome, Opera, Safari и Firefox. IE все еще проблема.

function prepareList(code, list, level) { 
    if (level == 1) { 
     list.children('option').each(function() { 
      if ($(this).text().substring(1, 4) != code && $(this).text() != 'None') { 
       $(this).detach(); 
      } 
     }); 
    } else if (level == 2) { 
     list.children('option').each(function() { 
      if ($(this).text().substring(1, 5) != code && $(this).text() != 'None') { 
       $(this).detach(); 
      } 
     }); 
    } 
} 

function rebuildList(list, a) { 
    if(a == 2) { 
     for(var i = 0; i < tempt2.length; i++) { 
      $(list).append(tempt2[i]); 
     } 
    } 
    else if(a == 3) { 
     for(var i = 0; i < tempt3.length; i++) { 
      $(list).append(tempt3[i]); 
     } 
    } 
    else { 
     rebuildList($('#tier2'), 2); 
     rebuildList($('#tier3'), 3); 
     $("#tier2").val('none'); 
     $("#tier3").val('none'); 
    } 
} 

function saveList(list, a) { 
    if(a == 2) { 
     $(list).children('option').each(function() { 
      tempt2.push($(this).detach()); 
     }); 
     rebuildList($('#tier2'), 2); 
    } 
    else if(a == 3) { 
     $(list).children('option').each(function() { 
      tempt3.push($(this).detach()); 
     }); 
     rebuildList($('#tier3'), 3); 
    } 
} 

Новый JSFiddle: jsFiddle

Answer 2

$('#tier3').attr('disabled', true); 

Для того, чтобы отключить опцию элемента, вы должны установить его отключил атрибут в строку «отключено», а не логическое значение верно.

, который дает вам:

$('#tier3').attr('disabled', 'disabled'); 

Чтобы включить его:

$('#tier3').attr('disabled', ''); 

или

$('#tier3').removeAttr('disabled'); 

IE и многие другие другие браузеры ведут себя спокойно и не позволяют скрытие вариантов от Пользователь.
О других специальных обработках для IE, читайте this article.