How to get all selected option text from multi select Using Javascript

Question

I have problem in get all selected option in multi select

<select multiple="" title="" class="" id="fm_delivery_or_collection" name="fm_fields[fm_delivery_or_collection][]">
  <option value="90">Delivery or Collection1</option>
  <option value="91">Delivery or Collection2</option>
  <option value="92">Delivery or Collection3</option>
</select>

Bellow is my code and its return me only first selected option

var select = form.find('select')

for (var i = 0; i < select.length; i++) 
        {
            var s_id = jQuery(select[i]).attr('id');
            var str="",i;

            var e = document.getElementById(s_id);
            var strUser = e.options[e.selectedIndex].text;

            var name = jQuery(select[i]).attr('name')
            var str1 = jQuery(select[i]).attr('id').replace("fm_"," ")
            requestString += "<b>"+str1.replace(/_/g," ")+"</b>" + ':' +strUser+"<br>";
        }

So please suggest me how can i get all selected option text and where I make mistake ?

The value of select multiple (or select[select.selectedIndex]) is an array... — Teemu
– Teemu, Commented Feb 20, 2013 at 5:15
The answers are overly complicated. You can get all selected options text using .map(). $("select :selected").map(function (i, element) { return jQuery(element).text(); }).get(); — Kalimah
– Kalimah, Commented Jan 30, 2018 at 10:08

Jai · Accepted Answer · 2015-10-16 06:28:02Z

51

Your comment please suggest me how can i get all selected option text, So you can try this:

$("#fm_delivery_or_collection option:selected").each(function () {
   var $this = $(this);
   if ($this.length) {
    var selText = $this.text();
    console.log(selText);
   }
});

edited Oct 16, 2015 at 6:28

answered Feb 20, 2013 at 6:00

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

peiman F. · Accepted Answer · 2018-08-17 13:50:54Z

39

do all in one line now

var text = $('#selector option:selected').toArray().map(item => item.text).join();

it return like this:

text1,text2,text3,text4

answered Aug 17, 2018 at 13:50

peiman F.

1,6581 gold badge22 silver badges43 bronze badges

1 Comment

Thibault Witzig Over a year ago

Nice and simple solution. If you need a different output, join() accepts a separator as an argument. For exemple join(' | '), will ouput "text1 | text2 | text3 | text4". And a slight improvement : jQuery recommands using $('#selector').find('option:selected'), because searching by ID alone relies on document.getElementById, which is very fast, while the full selector does not. If #selector refers to a select tag, you may also remove the unnecessary "option" from the selector for a bit more efficiency : learn.jquery.com/performance/optimize-selectors

Talha · Accepted Answer · 2013-02-20 05:28:07Z

13

// Return an array of the selected opion values
// select is an HTML select element
function GetSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}

pass this function your select box as like..

var selectBox = document.getElementsById('fm_delivery_or_collection');
alert(GetSelectValues(selectBox ));

it will return the array of selected values

By using Jquery

$('select#fm_delivery_or_collection').val()

the val function called from the select will return an array if its a multiple.

answered Feb 20, 2013 at 5:28

Talha

19.3k8 gold badges53 silver badges66 bronze badges

Comments

GautamD31 · Accepted Answer · 2013-02-20 05:42:15Z

2

Try with this

$("#fm_delivery_or_collection option").each(function(){
    if($(this).attr('selected') == 'selected')
    {
        var name = $("#fm_delivery_or_collection").attr('name')
        var str1 = $("#fm_delivery_or_collection").attr('id').replace("fm_"," ")
        requestString += "<b>"+str1.replace(/_/g," ")+"</b>" + ':' +strUser+"<br>";
     }
})

edited Feb 20, 2013 at 5:42

answered Feb 20, 2013 at 5:16

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

3 Comments

Jai Over a year ago

see your iteration you are iterating through options and options doesn't have id and name. Can you see that?

Jai Over a year ago

Well you can add .parent() in that, try with it.

GautamD31 Over a year ago

Oh yes you are right @Jai...thanx for suggestion...I have edited now

Prabhagaran · Accepted Answer · 2015-11-20 08:18:32Z

2

 $("#id :selected").each(function (i,sel) {
   alert($(sel).text());
 });

Hope it Helps..

answered Nov 20, 2015 at 8:18

Prabhagaran

3,7201 gold badge22 silver badges19 bronze badges

Comments

Muthu · Accepted Answer · 2017-02-22 08:00:04Z

2

try this link:

$("#selection option:selected").each(function () {
   var $this = $(this);
   if ($this.length) {
    var selText = $this.text();
    console.log(selText);
    $('#selected').append(selText+', ');
  }
});

answered Feb 22, 2017 at 8:00

Muthu

212 bronze badges

Comments

adiga · Accepted Answer · 2019-06-11 06:48:41Z

2

Simply add this line of code:-

var reciever= jQuery('#to_select option:selected').toArray().map(item => item.text).join();
/* alert(reciever); */

edited Jun 11, 2019 at 6:48

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Jun 11, 2019 at 6:47

user11629449

211 bronze badge

Collectives™ on Stack Overflow

How to get all selected option text from multi select Using Javascript

7 Answers 7

Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related