Bagaimana cara mendapatkan beberapa nilai kotak pilih menggunakan jQuery?

155

Bagaimana cara mendapatkan beberapa nilai kotak pilih menggunakan jQuery?

jquery multi-select DEVOPS
sumber

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>
Darin Dimitrov
sumber
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...
kpull1
sumber
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.
Joz Naveen Joz
sumber
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

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

Prabhagaran
sumber
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);
Santhosh Rajkumar
sumber
0

Gunakan ini saja

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
Kartik Chauhan
sumber