jQuery ile select elemanına ait value ve text değerlerini almak


Bir otogaleri sitesi üzerinde çalışıyorum ve select ile listelenen araçların hem value hem de text değerlerini iki farklı inputa yazdırmam gerekti. Çok enteresandır ama her şeyi hep value üzerinden hallettiğim için olsa gerek daha önce böyle bir olaya ihtiyaç duymamıştım. Son derece pratik bir yol buldum ve daha sonra kaynak olarak kullanmak üzere buraya ekleyeyim dedim, sizin de işinize yarayabilir.

Script:

1
2
3
4
5
6
7
8
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
  function getValue(theId,theMarka) {
      $("#marka_id").val(theId);
      $("#marka_new").val(theMarka);    
    // alert(theMarka);
    }
</script>

Select input:

1
2
3
4
5
<select size="1" name="marka" id="marka" onchange="getValue($('#marka').val(),$('#marka option:selected').text());">
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Mercedes</option>
</select>

Çıktı inputları:

1
2
value: <input type="text" name="marka_id" size="20" id="marka_id"><br />
text: <input type="text" name="marka_new" size="20" id="marka_new">

Çalışan örnek:
Demo

İlginizi Çekebilecek Diğer İçerikler

Facebook Yorumları

7 Yorum

  1. Talip

    bende javascriptini paylaşayım
     
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <hemusteri_ad>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
    <title></title>

    <Script>
    var musteri_id = new Array(50);
    var kullanici= new Array(50);
    var musteri_ad = new Array(50);
    var musteri_mail = new Array(50);
    var musteri_tel = new Array(50);
    var musteri_gsm = new Array(50);

    musteri_id[0] = “120”;
    kullanici[0] = “Lokupz”;
    musteri_ad[0] = “Tolga”;
    musteri_mail[0] = “tolga@hotmusteri_mail.com”;
    musteri_tel[0] = “0212 222 22 22”;
    musteri_gsm[0] = “0544 451 32 19”;

    musteri_id[1] = “121”;
    kullanici[1] = “Pialfa”;
    musteri_ad[1] = “pialfa”;
    musteri_mail[1] = “pialfa@hotmusteri_mail.com”;
    musteri_tel[1] = “0212 237 49 95”;
    musteri_gsm[1] = “0533 333 33 33”;

    musteri_id[2] = “122”;
    kullanici[2] = “UzmanSorusu”;
    musteri_ad[2] = “uzman”;
    musteri_mail[2] = “uzmansorusu@hotmusteri_mail.com.tr”;
    musteri_tel[2] = “0212 222 55 55”;
    musteri_gsm[2] = “0 555 632 12 22”;

    function kullanicibilgileri(){

    var sayfa = document.kullanici;
    var sec = sayfa.ileten_firma;

    for (var i = 0; i <= kullanici.length; i++){
    if(sec.options[sec.selectedIndex].value == kullanici[i]){

    sayfa.musteri_id.value = musteri_id[i];
    sayfa.musteri_ad.value = musteri_ad[i];
    sayfa.musteri_mail.value = musteri_mail[i];
    sayfa.musteri_tel.value = musteri_tel[i];
    sayfa.musteri_gsm.value = musteri_gsm[i];

    break;
    }else{
    sayfa.musteri_id.value = “”;
    sayfa.musteri_ad.value = “”;
    sayfa.musteri_mail.value = “”;
    sayfa.musteri_tel.value = “”;
    sayfa.musteri_gsm.value = “”;

    }

    }

    }

    </Script>

    </hemusteri_ad>

    <body>

    <form name=”kullanici”>

    Kullanıcı Bilgileri :

    <select size=”1″ name=”ileten_firma” onChange=”kullanicibilgileri()”>

    <option value=””>Kullanıcılar</option>

    <option value=”Lokupz”>Lokupz</option>

    <option value=”Pialfa”>Pialfa</option>

    <option value=”UzmanSorusu”>UzmanSorusu</option>

    </select>
    <br>
    Musteri no :

    <input type=”text” name=”musteri_id” size=”15″>

    Adı adı :

    <input type=”text” name=”musteri_ad” size=”25″>

    E-müsteri_mail :

    <input type=”text” name=”musteri_mail” size=”30″>

    MÜsteri_tel :

    <input type=”text” name=”musteri_tel” size=”20″>

    Musteri gsm :

    <input type=”text” name=”musteri_gsm” size=”20″>

    </form>

    </body>

    </html>

  2. Batuhan Küçükali

    Teşekkürler  2 gün yapmaya çalıştım yapamadım eski yazılarınızı okumayı seviyorum onlara bakarken buldum 🙂

  3. Erkan Özdemir

    Arkadaşlar siz ustalaşmıssınız ama bizler yeni başlayanlar için nasıl yapıldığını adım adım anlatsanız olmazmı

  4. AHMET

    TEXT DEĞERLİ FARKLI AMA VALUE DEĞERLERİ AYNI OLUNCA VERMİŞ OLDUĞUNUZ KOD İŞE YARAMIYOR ARAŞTIRDIM LAKİN BULAMADIM ÇÖZÜMÜNÜ YARDIM EDİN

    function getValue(theId,theMarka) {
    $(“#marka_id”).val(theId);
    $(“#marka_new”).val(theMarka);
    // alert(theMarka);
    }

    Audi
    BMW
    Mercedes
    Reno
    Alfa
    Anadol

    value:
    text:

  5. AHMET

    bir asp sitemde veritabanından çektiğim verileri çağırıyor select seçimi yapılınca iki adet inputum var birisine text diğerine value değeri yazdırıyorum lakin value değerini doğru yazmasına rağmen text değerini valuesi aynı olan başka birİNİ yazıyor.

    ……VERİ TABANI KODLARI……

    <option value="”>

    value:
    text:

  6. AHMET

    TEXT DEĞERLİ FARKLI AMA VALUE DEĞERLERİ AYNI OLUNCA VERMİŞ OLDUĞUNUZ KOD İŞE YARAMIYOR ARAŞTIRDIM LAKİN BULAMADIM ÇÖZÜMÜNÜ YARDIM EDİN

    bir asp sistemde veri tabanından aldığım bilgileri select içerisine asp kodlarımla ceçiyorum dolayısı ile value değerleri aynı olan lakin text değerleri birbirinden farklı olan bir sürü veri geliyor

    tablo adım urun
    u_adı u_fiyat
    u1 10tl
    u2 5 tl
    u3 7 tl
    u4 3tl
    u5 5 tl
    u6 7 tl

    select alanımda value u_fiyat
    text u adı

    burdan seçim yapıldığında iki adet inputuma otomatik yazdırmak istiyorum

    input name fiyat olana fiyatı
    input name text olana urun adını

    yukarıda verdiğiniz kod value değerleri birbirinden farklı olduğu zaman çalışıyor lakin value değerleri aynı olunca çalışmıyor.

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