使用 jQuery 获取选择多个选项文本

Question

我有一个简单的 HTML 表单：

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

我正在使用此代码来获取选项文本。

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

选择单个选择时，结果是正确的：“选项1”或“选项2”

但是当你同时选择两者时，结果会串联在一起“Option 1Option 2”，“Option 1Option 2”

有没有办法在不连接结果的情况下做到这一点？

Answer 1

您可以使用map() 从选定的option 元素构建文本数组：

$('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>

Answer 2

只是普通的 JS 解决方案，使用 querySelectorAll 获取所有选项并使用 ... 扩展运算符创建一个数组，然后仅映射选定的值。

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>

或者像这样：

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