Как получить несколько значений окна выбора, используя 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() || []; также стоит отметить, что он возвращает массив строк. Я сравнивал с целым числом и не получил совпадений, поэтому я добавил .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);

Вывод: ["значение1", "значение2"]

Если вы используете .join ()

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

Вывод: текст1, текст2, текст3


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
— Клин Дсилва

3
Эй, парень. Работает отлично. Проверьте это. Вы должны надеяться на это. Не оставляйте беспомощных комментариев ..
— Прабхагаран

2
Это неэффективное использование jQuery. Лучше всего, чтобы предисловие с помощью селектора идентификаторов было следующим: $('#multiple').find(':selected')@Prabhagaran
— can_mubly_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.