How to get multiple select box values using jQuery?
JqueryMulti SelectJquery Problem Overview
How to get multiple select box values using jQuery?
Jquery Solutions
Solution 1 - Jquery
Using the .val()
function on a multi-select list will return an array of the selected values:
var selectedValues = $('#multipleSelect').val();
and in your 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>
Solution 2 - Jquery
var foo = $('#multiple').val();
Solution 3 - Jquery
You can also use js map function:
$("#multipleSelect :selected").map(function(i, el) {
return $(el).val();
}).get();
And then you can get any property of the option
element:
return $(el).text();
return $(el).data("mydata");
return $(el).prop("disabled");
etc...
Solution 4 - Jquery
Just by one line-
var select_button_text = $('#SelectQButton option:selected')
.toArray().map(item => item.text);
Output: ["text1", "text2"]
var select_button_text = $('#SelectQButton option:selected')
.toArray().map(item => item.value);
Output: ["value1", "value2"]
If you use .join()
var select_button_text = $('#SelectQButton option:selected')
.toArray().map(item => item.text).join();
Output: text1,text2,text3
Solution 5 - Jquery
var selected=[];
$('#multipleSelect :selected').each(function(){
selected[$(this).val()]=$(this).text();
});
console.log(selected);
Yet another approch to this problem. The selected array will have the indexes as the option values and the each array item will have the text as its value.
for example
<select id="multipleSelect" multiple="multiple">
<option value="abc">Text 1</option>
<option value="def">Text 2</option>
<option value="ghi">Text 3</option>
</select>
if say option 1 and 2 are selected.
the selected array will be :
selected['abc']=1;
selected['def']=2.
Solution 6 - Jquery
Html Code:
<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 Code:
$('#multiple :selected').each(function(i, sel){
alert( $(sel).val() );
});
Hope it works
Solution 7 - Jquery
Just use this
$('#multipleSelect').change(function() {
var selectedValues = $(this).val();
});
Solution 8 - Jquery
Get selected values in comma separator
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);
Solution 9 - Jquery
In case if you have multiple select boxes on a single page and they all have the same class which you can prefer in case of multiple rather than tracking id's:
$('.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.