Як отримати кілька значень поля вибору за допомогою jQuery?


Відповіді:



291

Використання .val()функції у списку з декількома виборами поверне масив вибраних значень:

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

та у вашому html:

<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
Що робити, якщо ти хочеш отримати Text 1замість вартості? замінити .val()на .text()?
Раза Ахмед

9
Варто зауважити, що множина вибору з нічого вибраного не повертається, nullа не порожній масив. Це означає, що якщо ви систематично додаєте вибране значення, вам доведеться трохи жонглювати, щоб правильно його встановити.
Лев

Дякую! Існує так багато способів отримати значення з елемента за допомогою jQuery, що неминуче йде боротьба за пошук шляху, який ви шукаєте.
Чарльз Вуд

5
@Leo, ви можете додати coalesc, щоб обійти нульову проблему, наприклад. var selectedValues = $('#multipleSelect').val() || []; Також варто зазначити, що він повертає масив рядків. Я порівнював ціле число і не отримував збігів, тому я додав a .toString().
tkerwood

16

Ви також можете використовувати функцію js map:

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

І тоді ви можете отримати будь-яку властивість optionелемента:

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

2
чудова відповідь, але не потрібно платити додаткові витрати на обгортання elяк об’єкт jQuery за кожен варіант. Просто йдіть прямо з DOM, коли це не надто дивно. Ви можете змінитись $(el).val()на справедливу el.value. Звичайно, якщо ви звикли до jQuery або хочете захоплювати дані чи атрибути, як ваші інші приклади, jQuery нікому не шкодить.
KyleMit

1
@KyleMit Чудова порада. Щойно застосував такий підхід, щоб схопити колекцію прихованих значень поля, і він працював ідеально.
EvilDr

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

Ще одне схвалення цієї проблеми. Вибраний масив матиме індекси як параметри значень, і кожен елемент масиву матиме текст як його значення.

наприклад

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

якщо обрані варіанти 1 та 2.

вибраний масив буде:

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

5

Лише по одному рядку-

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

Вихід: ["text1", "text2"]

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

Вихід: ["value1", "value2"]

Якщо ви використовуєте .join ()

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

Вихід: text1, text2, text3


4

Код 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>   

Код JQuery:

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

});

Сподіваюся, це спрацює


14
Не сподівайтеся, що це спрацює, якщо ви не впевнені, чи це відповідь, протестуйте та будьте впевнені!
Стерлінг Арчер

6
Якщо ви не впевнені у відповіді, то не публікуйте її .. !! ми тут не для сподівань .. !! LOL
Clain Dsilva

3
Гей, хлопець. Це прекрасно працює. Перевір. Ви повинні сподіватися на це. Не дайте невиправданих коментарів ..
Прабгагаран

2
Це неефективне використання jQuery. Краще підхід - це передмова із селектором ідентифікаторів на зразок цього: $('#multiple').find(':selected')@Prabhagaran
could_mutably_borrow

@YounisShah Навряд чи я б сказав, що це "неефективно", оскільки різниця в часі - це відносність нічого ...
NorCalKnockOut

0

Отримати вибрані значення в роздільниках коми

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.