Как получить несколько значений окна выбора, используя 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...
kpull1
источник
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

hardika
источник
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() ); 

});

Надеюсь, что это работает

Prabhagaran
источник
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);
Сантош Раджкумар
источник
0

Просто используйте это

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
Картик Чаухан
источник