Bagaimana cara mendapatkan semua opsi yang dipilih menggunakan jQuery?

406

Bagaimana saya bisa mendapatkan semua opsi pilih melalui jQuery dengan memberikan ID-nya?

Saya hanya mencari untuk mendapatkan nilai-nilai mereka, bukan teksnya.

Klik Upvote
sumber

Jawaban:

612

Menggunakan:

$("#id option").each(function()
{
    // Add $(this).val() to your list
});

.each () | Dokumentasi API jQuery

ybo
sumber
63
Tidak ada operasi JavaScript yang memerlukan jQuery. jQuery adalah masalah pilihan untuk menyederhanakan operasi JS.
ruuter
8
Anda juga dapat melakukan: $ ("# id option"). masing-masing (fungsi (nama, val) {var opt = val.text;});
kofifus
3
$.mapjauh lebih elegan dan lebih rentan kesalahan (lihat di bawah).
Elliot Cameron
1
$('#id option').map((index, option) => option.value): perhatikan bagaimana tanda tangan panggil terbalik dibandingkan dengan mapfungsi JS "vanilla" ( (item, index) =>)
imrok
168

Saya tidak tahu jQuery, tetapi saya tahu bahwa jika Anda mendapatkan elemen pilih, itu berisi objek 'opsi'.

var myOpts = document.getElementById('yourselect').options;
alert(myOpts[0].value) //=> Value of the first option
KooiInc
sumber
74
+1. Jangan menggunakan sihir pemilih jQuery yang kompleks untuk hal-hal yang sudah memiliki implementasi yang cukup efisien yang dibangun ke dalam DOM lama.
bobince
19
Kenapa tidak, @Bobince? Jika sebagian besar Anda menggunakan jQuery lebih cepat baik dengan kode yang lebih sedikit untuk ditulis, dan lebih cepat untuk tidak mencoba dan mencari tahu apakah Anda harus beralih ke javascript biasa dalam hal ini. Dan kode Anda lebih konsisten.
Andrew
139

$.map mungkin cara paling efisien untuk melakukan ini.

var options = $('#selectBox option');

var values = $.map(options ,function(option) {
    return option.value;
});

Anda dapat menambahkan opsi perubahan $('#selectBox option:selected')jika Anda hanya menginginkan yang dipilih.

Baris pertama memilih semua kotak centang dan menempatkan elemen jQuery mereka ke dalam variabel. Kami kemudian menggunakan .mapfungsi jQuery untuk menerapkan fungsi ke masing-masing elemen variabel itu; semua yang kami lakukan adalah mengembalikan nilai setiap elemen karena hanya itu yang kami pedulikan. Karena kami mengembalikannya ke dalam fungsi peta, sebenarnya ia membangun array nilai seperti yang diminta.

PCasagrande
sumber
3
Ini adalah solusi IMO paling elegan. Peta adalah konstruksi yang sangat kuat yang cocok dengan situasi ini.
hazerd
1
Saya sangat menyukai solusi Anda - ini adalah pendekatan yang saya gunakan. Namun, jika Anda hanya ingin nilai yang dipilih itu bahkan lebih sepele: $('#selectBox').val()akan mengembalikan array nilai yang dipilih.
whoisthemachine
Hai, @ PCasagrande Saya memiliki nama atribut khusus 'tipe-data'. Bagaimana saya bisa mendapatkan nilai ini menggunakan solusi Anda? Apa yang saya lakukan adalah 'option.data-type', tetapi ini memberi saya NaN. Terima kasih sebelumnya.
Me_developer
Hai, @ PCasagrande saya mendapatkan apa yang saya butuhkan dengan melakukan '$ (opsi, ini) .attr ("tipe data")'. Tetapi jika Anda memiliki sesuatu yang lebih baik maka beri tahu saya. Terima kasih. :)
Me_developer
Saya pikir Anda bisa melakukan 'return option.attr ("tipe data");' di peta. Itu seharusnya memberi Anda array nilai-nilai tipe data.
PCasagrande
74

Beberapa jawaban menggunakan each, tetapi mapmerupakan alternatif yang lebih baik di sini IMHO:

$("select#example option").map(function() {return $(this).val();}).get();

Ada (setidaknya) dua mapfungsi di jQuery. Jawaban Thomas Petersen menggunakan "Utilities / jQuery.map"; jawaban ini menggunakan "Traversing / map" (dan karenanya sedikit kode pembersih).

Itu tergantung pada apa yang akan Anda lakukan dengan nilai-nilai itu. Jika Anda, katakanlah, ingin mengembalikan nilai dari suatu fungsi, mapmungkin merupakan alternatif yang lebih baik. Tetapi jika Anda akan menggunakan nilai-nilai secara langsung Anda mungkin ingin each.

cic
sumber
4
Anda sebenarnya dapat menggunakan this.value alih-alih $ (this) .val () di sini. Anda juga sebaiknya dilayani dengan menemukan anak-anak di pemilih awal (opsi #example). Bagus tangguh dengan get () pada akhirnya.
Alex Barrett
1
@Alex Barret: Yah, mungkin untuk menyelesaikan masalah ini tanpa menggunakan jQuery sama sekali. Memanggil jQuery dengan elemen sebagai argumen hanya akan membungkus elemen dalam objek jQuery (yaitu tidak ada melintasi pohon, yaitu tidak semahal itu). Jadi mungkin sebagai optimasi mikro, ya.
cic
peta FTW. Inilah yang seharusnya dilakukan. Get () pada akhirnya tampaknya tidak perlu, (yang mengembalikan simpul DOM, dan val () sudah memberi kita sebuah string, jadi ...?) Var opts = $ ('# cm_amt option'). Map (function ( ) {return parseInt ($ (this) .val ());});
sbeam
3
@sbeam: "Karena nilai kembali adalah array yang dibungkus jQuery, sangat umum bagi get()objek yang dikembalikan untuk bekerja dengan array dasar." - api.jquery.com/map
cic
Ini membantu saya sangat banyak, saya ingin teks tidak nilai, jadi aku hanya berubah menjadi text()sebaliknya val(). Terima kasih ! (Saya menyebabkan Anda membaca lebih dari 1000 ;->)
ParPar
52
$('select#id').find('option').each(function() {
    alert($(this).val());
});
Raibaz
sumber
1
Ini tiketnya, karena saya suka men-cache elemen ke dalam variabel di init, daripada menggunakan pemilih.
Doug Beard
1
Juga berfungsi dengan $ (ini) (yang dicari) misalnya,
Hugh Seagraves
16
$("#id option").each(function()
{
    $(this).prop('selected', true);
});

Meskipun, cara yang BENAR adalah untuk mengatur properti DOM elemen, seperti:

$("#id option").each(function(){
    $(this).attr('selected', true);
});
Ben Sewards
sumber
4
Bukankah itu .attr ('terpilih', 'terpilih')?
v010dya
16

Ini akan menempatkan nilai opsi #myselectboxmenjadi array bersih yang bagus untuk Anda:

// First, get the elements into a list
var domelts = $('#myselectbox option');

// Next, translate that into an array of just the values
var values = $.map(domelts, function(elt, i) { return $(elt).val();});
Thomas Petersen
sumber
Anda dapat mempersingkat ini menjadi:$.map(domelts, elt=> $(elt).val())
Jonno_FTW
11

Anda dapat mengambil semua "nilai yang dipilih" dengan nama kotak centang dan menyajikannya dalam sengatan yang dipisahkan oleh ",".

Cara yang bagus untuk melakukan ini adalah dengan menggunakan $ .map (): jQuery:

var selected_val = $.map($("input[name='d_name']:checked"), function(a)
    {
        return a.value;
    }).join(',');

alert(selected_val);
Limpan
sumber
6
kode ini sangat tidak dapat dibaca, saya tidak akan pernah menggunakannya walaupun itu agak keren.
Klik Suara positif
7
juga pertanyaannya adalah tentang selectdan optionbukan kotak centang.
Demensik
6

Contoh kerja

Cara paling efisien untuk melakukan ini adalah menggunakan $.map()

Contoh:

var values = $.map($('#selectBox option'), function(ele) {
   return ele.value; 
});
Naveen Kumar Alonekar
sumber
3

Anda dapat menggunakan kode berikut untuk itu:

var assignedRoleId = new Array();
$('#RolesListAssigned option').each(function(){
    assignedRoleId.push(this.value);
});
Mitul Maheshwari
sumber
2

Untuk opsi multiselect:

$('#test').val()mengembalikan daftar nilai yang dipilih. $('#test option').lengthmengembalikan total jumlah opsi (baik yang dipilih maupun yang tidak dipilih)

Sergei Zinovyev
sumber
1

Ini adalah Skrip sederhana dengan jQuery:

var items = $("#IDSELECT > option").map(function() {
    var opt = {};
    opt[$(this).val()] = $(this).text();
    return opt;
}).get();
var selectvalues = [];

for(var i = 0; i < items.length; i++) {
    for(key in items[i]) {


        var id = key;
        var text = items[i][key];

        item = {}
        item ["id"] = id;
        item ["text"] = text;

        selectvalues.push(item);

    }
}
console.log(selectvalues);
copy(selectvalues);
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
Cubiczx
sumber
1

Berikut ini adalah contoh sederhana dalam jquery untuk mendapatkan semua nilai, teks, atau nilai dari item yang dipilih, atau teks dari item yang dipilih

$('#nCS1 > option').each((index, obj) => {
   console.log($(obj).val());
})

printOptionValues = () => {

  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).val());
  })

}

printOptionTexts = () => {
  $('#nCS1 > option').each((index, obj) => {
    console.log($(obj).text());
  })
}

printSelectedItemText = () => {
  console.log($('#nCS1 option:selected').text());
}

printSelectedItemValue = () => {
  console.log($('#nCS1 option:selected').val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="1" id="nCS1" name="nCS1" class="form-control" >
					<option value="22">Australia</option>
          <option value="23">Brunei</option>
          <option value="33">Cambodia</option>
          <option value="32">Canada</option>
          <option value="27">Dubai</option>
          <option value="28">Indonesia</option>
          <option value="25">Malaysia</option>				
</select>
<br/>
<input type='button' onclick='printOptionValues()' value='print option values' />
<br/>
<input type='button' onclick='printOptionTexts()' value='print option texts' />
<br/>
<input type='button' onclick='printSelectedItemText()' value='print selected option text'/>
<br/>
<input type='button' onclick='printSelectedItemValue()' value='print selected option value' />

NuOne
sumber
0
$("input[type=checkbox][checked]").serializeArray();

Atau:

$(".some_class[type=checkbox][checked]").serializeArray();

Untuk melihat hasilnya:

alert($("input[type=checkbox][checked]").serializeArray().toSource());
Pavel Krinitskiy
sumber
0

Jika Anda mencari semua opsi dengan beberapa teks yang dipilih maka kode di bawah ini akan berfungsi.

$('#test').find("select option:contains('B')").filter(":selected");
Tjcool
sumber
0

Jalan pintas

$(() => {
$('#myselect option').each((index, data) => {
    console.log(data.attributes.value.value)
})})

atau

export function GetSelectValues(id) {
const mData = document.getElementById(id);
let arry = [];
for (let index = 0; index < mData.children.length; index++) {
    arry.push(mData.children[index].value);
}
return arry;}
Emin Adiloğlu
sumber