IE 9忽略顯示沒有選擇的選項

在Html中我使用選擇選項。如果您輸入到輸入字段中，則選項將隱藏或顯示，如果選項文本以輸入文本開始。IE 9忽略顯示沒有選擇的選項

$(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的選項標籤有風格顯示沒有 但要隱藏。

來源

2015-10-02 Konobi

可以請你分享整個HTML代碼。 – pedram

隱藏'option'可能無法在所有瀏覽器中使用。你最好打賭就是禁用它們。 – lshettyl

你無法在所有瀏覽器中可靠地隱藏'option'元素。您應該將它們設置爲「禁用」（雖然它們仍然可見）或使用「選擇」樣式庫，這可以讓您動態地隱藏/顯示選項。 –

-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

來源

2015-10-02 10:49:11

IE確實支持'display：none'，而不是'option'元素。另外，jQuery沒有'toggleOption（）'方法，所以我不確定你期望做什麼？ –

對不起，添加了錯誤的jQuery。增加了$（「option_to_hide」）。wrap（''）; –

IE 9忽略顯示沒有選擇的選項

回答

相關問題