IE 9 игнорирует отображение none для опции выбора

Question

в Html Я использую Select с параметрами. Если вы введете поле ввода, опция будет скрыта или будет отображаться, если текст опции начинается с текста ввода.

$(document).on('keyup', '#modal-newSeriennummer', function() { 
    var datalist = $('#serialnumbers')[0].options; 
    for (var i = 0; i < datalist.length; i++) { 
     if (!datalist[i].text.startsWith($(this).val())) { 
      $(datalist[i]).hide(); 
     } else { 
      $(datalist[i]).show(); 
     } 
    } 

    var onlyVisible = $('#serialnumbers').find('option:visible'); 

    if (onlyVisible.length == 1) { 
     var key = event.keyCode || event.charCode; 
     if (key == 8 || key == 46) 
      return; 
     $('#serialnumbers').val(onlyVisible.val()); 
     $(this).val(onlyVisible.html()); 
     GetSpecificHgData(onlyVisible.val()); 
    } else { 
     $('#serialnumbers').val(''); 
    } 
}); 

Html:

<input id="modal-newSeriennummer" type="Text" name="newSeriennummern"> 
<select id="serialnumbers" size="6"> 
<option value="3bb55850-1884-4f43-85a2-04871ab0a2ff">79523</option> 
<option value="dc689af1-abff-4f97-9633-0814d4bbf0ff">19038</option> 
<option value="b72c213a-2a81-41d8-8b30-0b14015fb699">29028</option> 
<option value="8276cbe9-1394-4448-9b59-0e2e9e9231e4">79193</option> 
<option value="0188762d-25ec-41c1-83e2-171cba062050">39259</option> 
<option value="e369b23f-3827-4d95-9d90-1b127b0beb8f">22898</option> 
</select> 

он работает нормально, но не для IE 9. Опции тегов не иметь стиль показ ни но хочет скрыть.

Answer 1

IE не поддерживает style="display:none;"

Вместо option.style.display = 'none' вы пробовали option.hidden = true;.

Вы можете также:

$("option_to_hide").wrap('<span/>'); 
$("option_to_hide").unwrap('<span/>'); 

С помощью функции

jQuery.fn.toggleOption = function(show) { 
    $(this).toggle(show); 
    if(show) { 
     if($(this).parent('span.toggleOption').length) 
      $(this).unwrap(); 
    } else { 
     if($(this).parent('span.toggleOption').length == 0) 
      $(this).wrap('<span class="toggleOption" style="display: none;" />'); 
    } 
}; 

И использовать его:

$("option_to_toggle").toggleOption(true); // show option 
$("option_to_toggle").toggleOption(false); // hide option