How to get multiple select box values using jQuery?

Question

How to get multiple select box values using jQuery?

Platinumblond

Answer 1

jQuery .val()

  var foo = $('#multiple').val(); 

Teufert

Answer 2

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>

Radium

what if u want to get Text 1 instead of value? replace .val() with .text()? – Tarrel

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. – Brammer

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. – Swagsman

@Brammer 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(). – Meatball

Answer 3

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...

Jessiajessica

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. – Obligor

@Obligor Great tip. Just used this approach to grab a collection of hidden field values and it worked perfectly. – Negotiation

Answer 4

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

Enolaenormity

Answer 5

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.

Beckibeckie

Answer 6

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

Diacid

Hey Man. It works perfectly. Check it out. You should hope it. Don't give irrelevent comment.. – Diacid

This is an inefficient usage of jQuery. Better is approach is to preface with an ID selector like this: $('#multiple').find(':selected') @Diacid – Retral

@YounisShah I would hardly say it is "inefficient" as the time difference is relativity nothing... – Taddeo

Answer 7

Just use this

$('#multipleSelect').change(function() {
    var selectedValues = $(this).val();  
});

Literally

Answer 8

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

Ozonize

Answer 9

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.

Shep

Answer 10

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

Lapham