Як отримати кілька значень поля вибору за допомогою 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.