Getting select multiple option text with jQuery

Question

I have a simple HTML form:

<form>
<select class="form-control" name="select-1615762852985[]" multiple="true" id="select-1615762852985">
<option value="20" selected="true" id="select-1615762852985-0">Option 1</option>
<option value="20" id="select-1615762852985-1">Option 2</option></select>
</form>

I'm using this code to get option text.

var selected = $('#'+label_id).find('option:selected').text();

When a single choose is selected the result is correct: "Option 1" or "Option 2"

However when you select both at the same time, the result is concatenated together "Option 1Option 2", "Option 1Option 2"

Is there a way to do this without concatenating the results?

Does this answer your question? How to get all selected values from <select multiple=multiple>? — ikiK
– ikiK, Commented Mar 19, 2021 at 23:20

Rory McCrossan · Accepted Answer · 2021-03-19 23:34:47Z

3

You can use map() to build an array of the text from the selected option elements:

$('form').on('submit', e => {
  e.preventDefault();
  let selected = $(e.target).find('select option:selected').map((i, opt) => opt.textContent).get();
  console.log(selected);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select class="form-control" name="select-1615762852985[]" multiple="true" id="select-1615762852985">
    <option value="20" selected="true" id="select-1615762852985-0">Option 1</option>
    <option value="20" id="select-1615762852985-1">Option 2</option>
  </select>
  <button type="submit">Submit</button>
</form>

answered Mar 19, 2021 at 23:34

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

6 Comments

Scott Paterson Over a year ago

Thank you! Is there a way to get this to work selecting the ID directly. Can't get this to work: jQuery('#'+label_id).find('select option:selected').map((i, opt) => opt.textContent).get();

Rory McCrossan Over a year ago

That should work, so long as label_id is a valid selector of a parent element

Scott Paterson Over a year ago

It is valid, but I am getting an empty result.

Scott Paterson Over a year ago

Selecting the select id results in a blank result, selecting the form id results in Option 1,Option 2

Rory McCrossan Over a year ago

If label_id holds the id of the select, remove the 'select' from the selector in find()

|

ikiK · Accepted Answer · 2021-03-20 00:12:32Z

0

Just vanilla JS solution, use querySelectorAll to fetch all options and use ... spread operator to make an array, then map only selected values.

var sel = [...document.querySelectorAll("#select-1615762852985 option")].map(s => s.selected ? s.text : []).flat()


console.log(sel)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select class="form-control" name="select-1615762852985[]" multiple="true" id="select-1615762852985">
    <option value="20" selected="true" id="select-1615762852985-0">Option 1</option>
    <option value="20" id="select-1615762852985-1" selected="true">Option 2</option>
    <option value="20" id="select-1615762852985-1">Option 3</option>

  </select>
</form>

Or like this:

var sel = [...document.querySelectorAll("#select-1615762852985 option")].filter(s => s.selected).map(s=>s.text)

edited Mar 20, 2021 at 0:12

answered Mar 19, 2021 at 23:46

ikiK

6,5105 gold badges25 silver badges48 bronze badges

2 Comments

Scott Paterson Over a year ago

Thank you! It's strange, but when testing that it give me Option 1,Option 2,

ikiK Over a year ago

@ScottPaterson I had an error in code. Also there are 3 options in select now in example, 2 are selected.

Collectives™ on Stack Overflow

Getting select multiple option text with jQuery

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related