Bagaimana cara mendapatkan beberapa nilai kotak pilih menggunakan jQuery?


155

Bagaimana cara mendapatkan beberapa nilai kotak pilih menggunakan jQuery?

Jawaban:



291

Menggunakan .val()fungsi pada daftar multi-pilih akan mengembalikan array dari nilai yang dipilih:

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

dan di html Anda:

<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
bagaimana jika Anda ingin mendapatkan Text 1alih-alih nilai? ganti .val()dengan .text()?
Raza Ahmed

9
Patut dicatat bahwa beberapa pilihan dengan tidak ada yang dipilih mengembalikan nulldaripada array kosong. Ini berarti jika Anda secara sistematis menambahkan nilai yang dipilih, Anda memiliki sedikit juggling yang harus dilakukan untuk memperbaikinya.
Leo

Terima kasih! Ada begitu banyak cara untuk mendapatkan nilai dari suatu elemen dengan jQuery sehingga sulit untuk menemukan cara yang Anda cari.
Charles Wood

5
@ Leo Anda dapat menambahkan coalesc untuk mengatasi masalah nol misalnya var selectedValues = $('#multipleSelect').val() || []; Juga patut dicatat mengembalikan array string. Saya membandingkan bilangan bulat dan tidak mendapatkan kecocokan, jadi saya menambahkan .toString().
tkerwood

16

Anda juga dapat menggunakan fungsi peta js:

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

Dan kemudian Anda bisa mendapatkan properti apa pun dari optionelemen:

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

2
jawaban yang bagus, tetapi tidak perlu membayar biaya tambahan membungkus elsebagai objek jQuery untuk setiap opsi. Langsung saja keluar dari DOM ketika itu tidak terlalu aneh. Anda bisa berubah $(el).val()menjadi adil el.value. Tentu saja jika Anda terbiasa dengan jQuery atau ingin mengambil data atau atribut seperti contoh lainnya, jQuery tidak menyakiti siapa pun.
KyleMit

1
@KyleMit Tip yang bagus. Hanya menggunakan pendekatan ini untuk mengambil koleksi nilai-nilai bidang tersembunyi dan itu bekerja dengan sempurna.
EvilDr

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

Namun pendekatan lain untuk masalah ini. Array yang dipilih akan memiliki indeks sebagai nilai opsi dan setiap item array akan memiliki teks sebagai nilainya.

sebagai contoh

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

jika katakan opsi 1 dan 2 dipilih.

array yang dipilih adalah:

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

5

Hanya dengan satu baris-

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

Output: ["text1", "text2"]

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

Output: ["value1", "value2"]

Jika Anda menggunakan .join ()

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

Output: text1, text2, text3


4

Kode Html:

 <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>   

Kode JQuery:

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

});

Semoga berhasil


13
Jangan "berharap itu berhasil", jika Anda tidak yakin apakah itu jawabannya, ujilah dan pastikan!
Sterling Archer

6
Jika Anda tidak yakin dengan jawabannya, maka jangan mempostingnya .. !! kita tidak di sini untuk harapan .. !! LOL
Clain Dsilva

3
Hei bro. Ini bekerja dengan sempurna. Saksikan berikut ini. Kamu harus berharap itu Jangan memberikan komentar tidak
sopan

2
Ini adalah penggunaan jQuery yang tidak efisien. Pendekatan Better is to $('#multiple').find(':selected')be pengantar dengan pemilih ID seperti ini: @Prabhagaran
can't_mutably_borrow

@YounisShah Saya hampir tidak akan mengatakan itu "tidak efisien" karena perbedaan waktu tidak ada relativitas ...
NorCalKnockOut

0

Dapatkan nilai yang dipilih di pemisah koma

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

Gunakan ini saja

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.