選択されたオプションCSSはIE10で動作していませんか？

Question

$('#inputTest').on('keyup', function() { 
 
    $('#helloSellect option').css({ 
 
    display: "none" 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="inputTest"> 
 
<select id="helloSellect" multiple> 
 
    <option>oye</option> 
 
    <option>ram</option> 
 
    <option>raj</option> 
 
    <option>ban</option> 
 
</select>

私は、ユーザーが入力ボックスに任意の単語をクリックするとオプションを非表示にしたいと思います。 クロムでは動作していますが、IEでは動作しません。問題は何か、解決方法

Answer 1

CSSを使用して<select>コントロールのオプションを実際に「隠す」ことはできません。 Chromeは許可するかもしれませんが、実際には行っていません。オプションを削除する唯一の方法は、実際にDOMから項目を削除することです。

$('#helloSelect option').on('click', function() { 
 
    $(this).remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="inputTest"> 
 
<select id="helloSelect" multiple> 
 
    <option>oye</option> 
 
    <option>ram</option> 
 
    <option>raj</option> 
 
    <option>ban</option> 
 
</select>

Answer 2

私は、ディスプレイとは思わない：何も限り私はあなたが試すことができますどのような..呼び出すことができますように、すべてのブラウザでサポートされていないが、しかし、有効でないオプションを無効にすることです無効なエントリを表示しないように定義するエントリをcssに追加するだけです。

$('#helloSellect option').prop({'disabled': true}); 

してからCSSへ

select option[disabled] { 
    display: none; 
} 

をこのような何かを追加..or前述したように（あなたがそれらを後で必要がありますしない限り）だけエントリを削除：のような

何か。