JQuery kullanarak çoklu seçim kutusu değerleri nasıl alınır?


Yanıtlar:



291

.val()Çoklu seçim listesindeki işlevi kullanmak, seçilen değerlerden oluşan bir dizi döndürür:

var selectedValues = $('#multipleSelect').val();

ve html'nizde:

<select id="multipleSelect" multiple="multiple">
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

11
ya Text 1değer yerine almak istersen ? yerine .val()sahip .text()?
Raza Ahmed

9
Seçilen hiçbir şeyi olmayan bir çoklu seçimin nullboş bir dizi yerine döndüğünü belirtmek gerekir . Bu, programlı olarak seçilen bir değeri ekliyorsanız , doğru yapmak için biraz hokkabazlık yaptığınız anlamına gelir .
Leo

Teşekkür ederim! JQuery ile bir öğeden değer elde etmenin pek çok yolu var, kaçınılmaz olarak aradığınız yolu bulmak için bir mücadele.
Charles Wood

5
@ Leo null sorunu etrafında almak için bir coalesc ekleyebilirsiniz örneğin var selectedValues = $('#multipleSelect').val() || []; Ayrıca dikkat çeken bir dizi dizeleri döndürür. Ben bir tamsayı karşılaştırmak ve hiçbir eşleşme elde edildi, bu yüzden bir ekledi .toString().
tkerwood

16

Js map fonksiyonunu da kullanabilirsiniz:

$("#multipleSelect :selected").map(function(i, el) {
    return $(el).val();
}).get();

Ve sonra optionöğenin herhangi bir özelliğini alabilirsiniz :

return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...

2
büyük cevap, ama elher bir seçenek için bir jQuery nesnesi olarak sarma ekstra masraf ödemek gerek yok . Çok garip olmadığında sadece DOM'dan çıkın. Sen değiştirebilir $(el).val()lazım el.value. Elbette jQuery'ye alışkınsanız veya diğer örnekleriniz gibi veri veya nitelikleri almak istiyorsanız, jQuery kimseye zarar vermez.
KyleMit

1
@KyleMit Harika bir ipucu. Sadece bu yaklaşımı gizli alan değerlerinin bir koleksiyonunu almak için kullandı ve mükemmel çalıştı.
EvilDr

12
var selected=[];
 $('#multipleSelect :selected').each(function(){
     selected[$(this).val()]=$(this).text();
    });
console.log(selected);

Yine bu soruna başka bir yaklaşım. Seçilen dizi, seçenek değerleri olarak dizinlere ve her dizi öğesinin değeri olarak metne sahip olacaktır.

Örneğin

<select id="multipleSelect" multiple="multiple">
    <option value="abc">Text 1</option>
    <option value="def">Text 2</option>
    <option value="ghi">Text 3</option>
</select>

diyelim ki seçenek 1 ve 2 seçili.

seçilen dizi:

selected['abc']=1; 
selected['def']=2.

5

Sadece bir satır-

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text);

Çıktı: ["text1", "text2"]

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.value);

Çıktı: ["değer1", "değer2"]

.Join () kullanırsanız

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text).join();

Çıktı: metin1, metin2, metin3


4

HTML Kodu:

 <select id="multiple" multiple="multiple" name="multiple">
  <option value=""> -- Select -- </option>
  <option value="1">Opt1</option>
  <option value="2">Opt2</option>
  <option value="3">Opt3</option>
  <option value="4">Opt4</option>
  <option value="5">Opt5</option>
 </select>   

JQuery Kodu:

$('#multiple :selected').each(function(i, sel){ 
    alert( $(sel).val() ); 

});

Umarım çalışır


14
"Umarım işe yarıyor", cevap olup olmadığından emin değilseniz, test edin ve emin olun!
Sterling Archer

6
Cevabından emin değilseniz, göndermeyin .. !! umutlar için burada değiliz .. !! LOL
Clain Dsilva

3
Hey dostum. Mükemmel çalışıyor. Bunu kontrol et. Bunu ummalısın. İlgisiz yorum yapma ..
Prabhagaran

2
Bu, jQuery'nin verimsiz kullanımıdır. : Daha iyi yaklaşım böyle bir kimlik seçici ile önsöz etmektir $('#multiple').find(':selected')@Prabhagaran
cannot_mutably_borrow

@YounisShah Zaman farkı görelilik hiçbir şey olduğu için "verimsiz" olduğunu söyleyemem ...
NorCalKnockOut

0

Seçilen değerleri virgül ayırıcısında alma

var Accessids = "";
$(".multi_select .btn-group>ul>li input:checked").each(function(i,obj)
{
    Accessids=Accessids+$(obj).val()+",";
});
Accessids = Accessids.substring(0,Accessids.length - 1);
console.log(Accessids);

0

Sadece bunu kullan

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
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.