jQuery ile select metinlerini değiştirmek (Change select option text)


jQuery ile select inputunun option metinlerini değiştirmek candır. Ben bu işlevi özensizce hazırlanmış 3. parti bir yazılıma eş zamanlı (tarayıcı bazlı) Türkçe çeviri yaptırırken kullandım. Böyle ekstrem bir deneyime itilmemin nedeni, yazılımın %100 dil desteği verdiğini iddia ediyor olmasına rağmen bir çok dil değişkenini hardcoded olarak bünyesinde barındırıyor olmasıydı -ki biz buna halk arasında amelelik diyoruz.

Gelelim son derece basit olan scriptimize ve kullanımına. Senaryomuz select optionlarının value kısımlarına dokunmadan sadece textleri (metinleri) değiştirmek üzerine. Böylelikle amelece kodlanmış 3. parti yazılımların işleyişlerine müdahale etmeden işimizi görebiliriz.

Elimizde aşağıdaki gibi bir select inputu olduğunu varsayalım:

1
2
3
4
5
  <select id="takimlar">
    <option value="takim1">Fenerbahçe</option>
    <option value="takim2">Galatasaray</option>
    <option value="takim3">Beşiktaş</option>
  </select>

İşe önce değiştirmek istediğimiz metinlere karşılık gelecek ifadeleri dizi halinde tanımlayarak başlıyoruz:

1
2
3
4
5
 var texts = {
    'Fenerbahçe'  : 'Sarı Lacivert',
    'Galatasaray' : 'Sarı Kırmızı',
    'Beşiktaş'    : 'Siyah Beyaz'
  };

Eğer select option metinlerinin hepsinin değil, sadece bir veya birkaç tanesinin değiştirilmesini istiyorsanız bu alanda sadece değiştirilmesini istediğinizi metinleri tanımlamanız yeterli.

Daha sonra metin değiştirme işlevini üstlenecek olan kodlarımızı hazırlıyoruz:

1
2
3
  $("#takimlar option").each(function() {
    $(this).text(texts[$(this).text()]);
  });

Buna göre kodlarımız takimlar id’li selecte ait option metinlerinin her birini, yukarıda dizi olarak tanımladığımız ifadelerle eşleştirip uyanları değiştiriyor fakat value kısımlarına dokunmuyor.

Son işimiz scriptin tetiklenmesini sağlamak. Bunu kullanım amacımıza göre iki farklı biçimde yapabiliriz. İlki jQuery’nin .ready() eventını kullanarak kodların, sayfanın yüklenmesi tamamlandıktan sonra otomatik olarak çalışmasını sağlamak.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function() {

 // Değiştirilecek metinler
    var texts = {
      'Fenerbahçe'  : 'Sarı Lacivert',
      'Galatasaray' : 'Sarı Kırmızı',
      'Beşiktaş'    : 'Siyah Beyaz'
    };

 // Değiştirme işlemi
   $("#takimlar option").each(function() {
     $(this).text(texts[$(this).text()]);
   });

});

Diğer bir seçenek ise benim örnek uygulamada yaptığım gibi .click() eventını kullanmak. Bu şekilde metin çevirme işlemini manuel olarak yaptırabiliriz. Bu olayı bir çok sitede rastlayabileceğiniz zemin rengi, yazı boyutu değiştirme işlevlerine benzetebilirsiniz.

Tetikleyicimizin aşağıdaki gibi bir link olduğunu varsayalım:

1
<a id="cevir" href="javascript:void(0);">Metinleri Değiştir</a>

Buna göre kodlarımızın aşağıdaki gibi olması gerekiyor:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#cevir").click(function(){

 // Değiştirilecek metinler
    var texts = {
      'Fenerbahçe'  : 'Sarı Lacivert',
      'Galatasaray' : 'Sarı Kırmızı',
      'Beşiktaş'    : 'Siyah Beyaz'
    };

 // Değiştirme işlemi
   $("#takimlar option").each(function() {
     $(this).text(texts[$(this).text()]);
   });

});

Hepsi bu kadar, artık select option metinlerini tarayıcı bazlı değiştiren nur topu gibi bir scriptimiz var. jQuery kütüphanesinin sayfaya nasıl dahil edileceği gibi aklınıza takılabilecek diğer detaylar için çalışan örneği inceleyebilirsiniz.

Scriptin çalışan örneği:
Demo

Scripti indir (83 Kb):
Download

Facebook Yorumları

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir