Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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>
                Worth noting that a multiple select with nothing selected returns null rather than an empty array. This means if you’re programatically adding a selected value, you have a bit of juggling to do to get it right.
– Leo
                May 22, 2014 at 16:50
                Thank you! There are so many ways to get a value from an element with jQuery that it's inevitably a struggle to find the way that you're looking for.
– Charles Wood
                Jun 13, 2014 at 14:59
                @Leo you can add a coalesc to get around the null issue  e.g var selectedValues = $('#multipleSelect').val() || [];  Also worth noting it returns an array of strings.  I was comparing to an integer and getting no matches, so i added a .toString().
– tkerwood
                Jul 27, 2016 at 2:05
                great answer, but no need to pay the extra expense of wrapping el as a jQuery object for every single option.  Just go straight off the DOM when it's not too weird.  You could change $(el).val() to just el.value.  Of course if you're used to jQuery or want to grab data or attributes like your other examples, jQuery isn't hurting anyone.
– KyleMit
                Aug 14, 2015 at 20:42
                @KyleMit Great tip.  Just used this approach to grab a collection of hidden field values and it worked perfectly.
– EvilDr
                Jun 19, 2017 at 10:32
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
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.
 <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
                Hey Man. It works perfectly. Check it out. You should hope it. Don't give irrelevent comment..
– Prabhagaran
                Dec 17, 2015 at 11:19
                This is an inefficient usage of jQuery. Better is approach is to preface with an ID selector like this: $('#multiple').find(':selected') @Prabhagaran
– cannot_mutably_borrow
                Jan 18, 2018 at 8:29
                @YounisShah I would hardly say it is "inefficient" as the time difference is relativity nothing...
– NorCalKnockOut
                Feb 27, 2018 at 22:36
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);
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.
This jQuery works well for me. I use a getFormValues() function for various tasks, so it's a good place to rebuild some of the form data when it's missing.
It checks each form field to see if it's a multi-select type and if it is, rebuild the value with all of the selected options. I'm sure something similar would be needed for checkboxes too...
// Get form values as a key-value Object
function getFormValues(form) {
  var formData = new FormData(form[0]),
      values = Object.fromEntries(formData);
  // Rebuild multi-select values.
  $.each(values, function(key, value){
    var element = $(form).find(':input[name="'+key+'"]');
    if (element.is('select[multiple]')){
      values[key] = element.val();
  return values;
// Use with AJAX.
$('form').on('submit', function(e){
  e.preventDefault();
  var form = $(this);
  $.ajax({
    URL: 'http://google.com/',
    data: getFormValues(form),
    success: function(data, textStatus){
      console.log(data);
    error: function(jqXHR, textStatus, errorThrown){
      console.log(textStatus, errorThrown);
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.