Bazen bir select input'unda (seçim listesi) elemanlardan bazılarını gizlemek istersiniz. O elemanı tamamen çıkarmak ve sonradan tekrar eklemek bana göre biraz gereksiz. Bu nedenle ben her zaman gizleme yöntemini kullanıyorum.

IE Edge, Chrome, Firefox, Opera gibi tarayıcılarda herhangi bir gizleme sorunu ile karşılaşmıyorsunuz. Çünkü klasik hide veya hidden class'ını verince veya direk css ile konuşmak gerekirse display: none !important; yazıldığında option otomatik olarak gizlenmiş oluyor. Tek problem IE 11'de oluyor. Nedense yukarıda bahsettiklerimin hiçbirisi çalışmıyor. Bu nedenle farklı bir yoldan gitmek zorunda kalıyorsunuz ve bir nevi select input'u hackliyorsunuz. Bunun içinde gizlenmesi gereken elemanı span içerisine alarak gizliyoruz.

jsFiddle ile çalışan örneğine buraya tıklayarak göz arabilirsiniz.

<select id="foo">
    <option class="dotnet">csharp</option>
    <option class="sql">mssql</option>
    <option class="dotnet">vb</option>
    <option class="sql">mysql</option>
    <option class="sql">nosql</option>
</select>
<div style="margin-top:10px">
    <button id="dotnet" type="button">dotnet gizle</button>
    <button id="sql" type="button">sql gizle</button>
    <button id="show_all" type="button">hepsini göster</button>
</div>

$.fn.optVisible = function(state) {
    return state ? 
        this.filter("span > option").unwrap() :
        this.filter(":not(span > option)").wrap("<span>").parent().hide() ;
}


$("#show_all").on("click", function() {
    $("#foo option").optVisible(true);
});


$("#dotnet").on("click", function() {
    $("#foo option.dotnet").optVisible(false);
});


$("#sql").on("click", function() {
    $("#foo option.sql").optVisible(false);
});