jQuery seçilen seçenek değerini al (metni değil, 'değer' niteliğini)


156

Tamam, bu kod var:

<select name="selector" id="selector">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

Ve seçilen seçeneğin değerini almak istiyorum. Örnek: 'Seçenek 2' seçilir ve değeri '2'dir. '2', 'Seçenek 2' değil, almam gereken değerdir.


Alma için demo eğitimi: freakyjolly.com/… Ayarlama için demo eğitimi freakyjolly.com/… Tek ve Çoklu Seçim Kutusu
Kod Casusu

Yanıtlar:


271

04/2020: Eski cevap düzeltildi

Kullan : seçili seçeneklerde seçilen psuedo seçicisini seçin ve sonra seçeneğin değerini almak için .val işlevini kullanın.

$('select[name=selector] option').filter(':selected').val()

Yan not : Filtre kullanmak :selectedseçiciyi doğrudan ilk sorguda kullanmaktan daha iyidir .

Bir değişiklik işleyicisinin içindeyse, yalnızca this.valueseçilen seçenek değerini almak için kullanabilirsiniz . Daha fazla seçenek için demoya bakın.

//ways to retrieve selected option and text outside handler
console.log('Selected option value ' + $('select option').filter(':selected').val()); 
console.log('Selected option value ' + $('select option').filter(':selected').text());

$('select').on('change', function () {
  //ways to retrieve selected option and text outside handler
  console.log('Changed option value ' + this.value);
  console.log('Changed option text ' + $(this).find('option').filter(':selected').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
  <option value="1" selected>1 - Text</option>
  <option value="2">2 - Text</option>
  <option value="3">3 - Text</option>
  <option value="4">4 - Text</option>
</select>

Eski cevap:

Düzenleme: Belirtildiği gibi, bu seçilen seçenek değerini döndürmez.

~~ Seçilen seçeneğin değerini almak için .val kullanın . Aşağıya bakınız,

$('select[name=selector]').val()~~

5
$('select[name=selector]').change(function() { alert($(this).val()); });
Testini yap

4
Seçilen seçeneğin hiçbir valueözelliği belirtilmemişse, etiketin (yani <option>label</option>) döndürüleceğini unutmayın. Her zaman istediğin şey olmayabilir. Tabii ki, çoğu uygulamada değer belirtilir.
Çek teknolojisi

115

Sadece deneyimlerimi paylaşmak istedim

Benim için,

$('#selectorId').val()

null değerini döndürdü.

Kullanmak zorundaydım

$('#selectorId option:selected').val()


1
Tarayıcıya özel durum muydu? Chrome'un en yeni sürümü buna izin vermedi mi veya desteklemeyen IE miydi?
Theodor Solbjørg

1
Chrome'un en yeni sürümündeydi. Belki de Firefox'ta, ama emin değilim.
David Torres

Benim için neden $('#selectorId option:selected').val()işe yaramadığından emin değilim. Bunun yerine$('select option:selected').val()
Francisco Quintero

1
@Francisco Sorun, $('select option:selected').val()HTML kodundaki ilk seçicinin değerini almasıdır . Oysa $('#selectorId option:selected').val()sizin belirttiğiniz kimliğin değeri olabilir. Yazım hatası olup olmadığını iki kez kontrol edin. İşte az önce söylediğimi gösteren bir örnek: codepen.io/anon/pen/Nqgqyz
David Torres


9

Seçiminize bir kimlik eklemeniz gerekiyor. Sonra:
$('#selectorID').val()


i eklendi, sadece buraya eklemek unuttum.
n00b

1
Bir kimliği seçici olarak kullanarak okuduğum kadarıyla en hızlı yöntem.
Marcus

5

Bunu dene:

$(document).ready(function(){
    var data= $('select').find('option:selected').val();
});

veya

var data= $('select').find('option:selected').text();

4

jqueryaşağıdaki gibi kullanabilirsiniz

SENARYO

  $('#IDOfyourdropdown').change(function(){
    alert($(this).val());
  });

FIDDLE burada


2

Böyle bir seçim için

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option id="0">CHOOSE AN OPTION</option>
   <option id="127">John Doe</option>
   <option id="129" selected>Jane Doe</option>

... kimliği şu şekilde alabilirsiniz:

$('#list-name option:selected').attr('id');

Ya da bunun yerine değeri kullanabilir ve kolay yolu elde edebilirsiniz ...

<select class="btn btn-info pull-right" id="list-name" style="width: auto;">
   <option value="0">CHOOSE AN OPTION</option>
   <option value="127">John Doe</option>
   <option value="129" selected>Jane Doe</option>

bunun gibi:

$('#list-name').val();

2

Benim seçeneklerden biri bir değer yoktu: <option>-----</option>. Kullanmaya çalışıyordum if (!$(this).val()) { .. }ama garip sonuçlar alıyordum. Öğenizde bir valueniteliğiniz yoksa <option>, boş bir dize yerine içindeki metni döndürür. Eğer istemiyorsanız val()sizin seçeneği için bir şey dönmek için, eklemek emin olun value="".


0

Örneğe bakınız:

    <select class="element select small" id="account_name" name="account_name"> 

        <option value="" selected="selected">Please Select</option>           
        <option value="paypal" >Paypal</option>
        <option value="webmoney" >Webmoney</option>

    </select>

 <script type="text/javascript">

        $(document).ready(function(){ 
             $('#account_name').change(function(){
               alert($(this).val());                                                          
             });
        });
 </script>

0
$('#selectorID').val();

VEYA

$('select[name=selector]').val();

VEYA

$('.class_nam').val();

@FarhadBagherlo "Tut yazarak" dir değil yararlı bir düzenleme açıklama! Düzenleme geçmişinin okuyucularının, değiştirilen her karakteri incelemeden ne yaptığınızı anlamaları için lütfen değişikliklerinizi özetleyin. Teşekkürler!
jpaugh

0

bu kod benim için çok iyi çalışıyor: bu, seçilen seçeneğin değerini döndürür. $ ( '# Select_id') bulabilirsiniz ( 'seçeneği: seçilen') val ();..


0
 $(document ).ready(function() {
    $('select[name=selectorname]').change(function() { 
     alert($(this).val());});
 });

Bu kod sorunu çözebilse de, bu kodu anlayamayabilecek insanlar için ayrıntılı bir şekilde eklemek ve nasıl çalıştığını açıklamak en iyisidir.
paper1111

@ paper1111 bu basit işlevlerdir. Bunun gerekli olup olmadığını açıklayabilirim. $ ('select [name = burada kutu adını seçin]) .change () - fonksiyonunu seç, kutu seçimini değiştir fonksiyonunun işe yarayacağı anlamına gelir. $ (this) .val () - seçilen seçenek değerini döndürür
Turan Zamanlı

0

Kaynak Bağlantı

Seçilen Değeri ALMAK için jQuery val () ve Seçenek Metnini ALMAK için text () kullanın.

    <select id="myDropDown" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>

Seçmeli Açılırken Etkinliği Değiştir

        $("#myDropDown").change(function () {

            // Fetching Value
            console.log($(this).val());

            // Fetching Text
            console.log($(this).find('option:selected').text());

            alert('Value: '+$(this).val()+' | Text: '+$(this).find('option:selected').text());
        });

Düğme Tıklaması

        $("button").click(function () {

        // Fetching Value
            console.log($("#myDropDown").val());

    // Fetching Text
            console.log($('#myDropDown option:selected').text());

            alert('Value: '+$("#myDropDown").val()+' | Text: '+$('#myDropDown option:selected').text());
        });
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.