jQuery ile input select elemanlarını gizlemek

25 Kasım 2016 1 dk okuma süresi 195 okunma

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);
});


Yazılarıma abone olmak ister misiniz?
Spam yapılmaz, sadece bildirim amaçlıdır. İstediğiniz zaman abonelikten çıkabilirsiniz.
İlginizi çekebilecek diğer yazılar.
jquery template nedir ve kullanım örneği

Css kullanarak elemeni yatay ve dikey ortalama

ASP.NET MVC 3 ile gelen kullanışlı bir özellik olan remote validation nedir, nasıl kullanılır?