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 — ikiK, Mar 19 '21 at 23:20

score 3 · Accepted Answer · answered Mar 19 '21 at 23:34

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 '21 at 23:34

Rory McCrossan

331,213
40
305
339

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(); – Scott Paterson Mar 19 '21 at 23:44
That should work, so long as label_id is a valid selector of a parent element – Rory McCrossan Mar 19 '21 at 23:46
It is valid, but I am getting an empty result. – Scott Paterson Mar 19 '21 at 23:47
Selecting the select id results in a blank result, selecting the form id results in Option 1,Option 2 – Scott Paterson Mar 19 '21 at 23:51
If label_id holds the id of the select, remove the 'select' from the selector in find() – Rory McCrossan Mar 19 '21 at 23:52
Doing that results in Option 1,Option 2 as a string for some reason. – Scott Paterson Mar 19 '21 at 23:56

ikiK · Answer 2 · 2021-03-20T00:12:32.797

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)

Thank you! It's strange, but when testing that it give me Option 1,Option 2, — Scott Paterson, Mar 19 '21 at 23:54
@ScottPaterson I had an error in code. Also there are 3 options in select now in example, 2 are selected. — ikiK, Mar 20 '21 at 00:06

Getting select multiple option text with jQuery

2 Answers2