Как получить несколько значений поля выбора с помощью jQuery?

Как получить несколько значений поля выбора с помощью jQuery?


person DEVOPS    schedule 14.07.2010    source источник


Ответы (9)


jQuery .val ()

  var foo = $('#multiple').val(); 
person Pranay Rana    schedule 14.07.2010

Использование функции .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>
person Darin Dimitrov    schedule 14.07.2010
comment
что, если вы хотите получить Text 1 вместо значения? заменить .val() на .text()? - person Raza Ahmed; 06.09.2013
comment
Стоит отметить, что множественный выбор без выбора ничего не возвращает null, а не пустой массив. Это означает, что если вы программно добавляете выбранное значение, вам придется немного поработать, чтобы получить его правильно. - person Leo; 22.05.2014
comment
Спасибо! Существует так много способов получить значение от элемента с помощью jQuery, что неизбежно сложно найти тот способ, который вы ищете. - person Charles Wood; 13.06.2014
comment
@Leo вы можете добавить coalesc, чтобы обойти проблему с нулевым значением, например var selectedValues = $('#multipleSelect').val() || []; Также стоит отметить, что он возвращает массив строк. Я сравнивал с целым числом и не получал совпадений, поэтому добавил .toString(). - person tkerwood; 27.07.2016

Вы также можете использовать функцию 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...
person kpull1    schedule 22.04.2014
comment
отличный ответ, но нет необходимости оплачивать дополнительные расходы на упаковку el в качестве объекта jQuery для каждой отдельной опции. Просто уходите прямо из DOM, когда это не слишком странно. Вы можете заменить $(el).val() на el.value. Конечно, если вы привыкли к jQuery или хотите получать данные или атрибуты, как в других примерах, jQuery никому не вредит. - person KyleMit; 14.08.2015
comment
@KyleMit Отличный совет. Просто использовал этот подход, чтобы получить коллекцию значений скрытых полей, и он отлично сработал. - person EvilDr; 19.06.2017
comment
лучший ответ. Благодарность - person John Cris Mañabo; 04.03.2021

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.
person Joz Naveen Joz    schedule 19.05.2014

Всего одной строкой-

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

person hardika    schedule 30.04.2019

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

});

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

person Prabhagaran    schedule 20.11.2015
comment
Привет, чувак. Работает отлично. Проверить это. Вы должны на это надеяться. Не давайте лишних комментариев .. - person Prabhagaran; 17.12.2015
comment
Это неэффективное использование jQuery. Лучше всего использовать селектор идентификаторов в начале: $('#multiple').find(':selected') @Prabhagaran - person cannot_mutably_borrow; 18.01.2018
comment
@YounisShah Я бы не сказал, что это неэффективно, так как разница во времени - это ничего не относительность ... - person NorCalKnockOut; 28.02.2018

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

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});
person Kartik Chauhan    schedule 04.07.2017

Получить выбранные значения через запятую.

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);
person Santhosh Rajkumar    schedule 20.12.2016

В случае, если у вас есть несколько полей выбора на одной странице, и все они имеют один и тот же класс, который вы можете предпочесть в случае нескольких, а не отслеживания идентификаторов:

$('.classname option:selected').map(function(){
    return this.value; // If you want value.
    // Or you could also do.
    return this.text; // If you want text of select boxes.
}).get(); // It will return an Array of selected values/texts.
person Ch Usman    schedule 20.05.2021