How to get multiple select box values using 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
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...
jQuery .val()
var foo = $('#multiple').val();
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>