Как получить несколько значений поля выбора с помощью jQuery?
Как получить несколько значений поля выбора с помощью jQuery?
Ответы (9)
Использование функции .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>
Text 1
вместо значения? заменить .val()
на .text()
?
- person Raza Ahmed; 06.09.2013
null
, а не пустой массив. Это означает, что если вы программно добавляете выбранное значение, вам придется немного поработать, чтобы получить его правильно.
- person Leo; 22.05.2014
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...
el
в качестве объекта jQuery для каждой отдельной опции. Просто уходите прямо из DOM, когда это не слишком странно. Вы можете заменить $(el).val()
на el.value
. Конечно, если вы привыкли к jQuery или хотите получать данные или атрибуты, как в других примерах, jQuery никому не вредит.
- person KyleMit; 14.08.2015
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.
Всего одной строкой-
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
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() );
});
Надеюсь, что это работает
$('#multiple').find(':selected')
@Prabhagaran
- person cannot_mutably_borrow; 18.01.2018
Просто используйте это
$('#multipleSelect').change(function() {
var selectedValues = $(this).val();
});
Получить выбранные значения через запятую.
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);
В случае, если у вас есть несколько полей выбора на одной странице, и все они имеют один и тот же класс, который вы можете предпочесть в случае нескольких, а не отслеживания идентификаторов:
$('.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.