Ausgewählte Option css funktioniert nicht in 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>

Ich möchte die Optionen verstecken, wenn der Benutzer ein beliebiges Wort in Eingabefeld klickt. In Chrome funktioniert es, funktioniert aber nicht im IE. Was ist das Problem und wie kann es gelöst werden?

Answer 1

Sie können nicht wirklich Optionen in einem <select> Steuerelement mit CSS "ausblenden". Chrome mag es erlauben, aber sie sind nicht wirklich weg. Die einzige Möglichkeit zum Entfernen von Optionen besteht darin, das Element tatsächlich aus dem DOM zu entfernen.

$('#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

Ich glaube nicht, dass das display: none wird in allen Browsern unterstützt, soweit ich mich erinnern kann .. Was Sie versuchen können, obwohl, um die Optionen zu deaktivieren, nicht gültig Fügen Sie dann einfach einen Eintrag zu Ihrer CSS hinzu, der angibt, dass deaktivierte Einträge nicht angezeigt werden sollen.

Etwas wie:

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

und dann so etwas zu Ihrem CSS

select option[disabled] { 
    display: none; 
} 

hinzufügen .or nur die Einträge entfernen, wie oben angegeben (es sei denn, Sie werden sie später benötigen).