多项选择的 JavaScript selectedIndex 文本

Question

我使用 Symfony Twig 模板在我的输入中有一个标签列表:

    <select id="choices-multiple-remove-button" class="form-control" name="choices-multiple-remove-button"  placeholder="Compétences" multiple>
    {% for skill in skills %}
      <option value="{{skill.id}}">{{skill.label}}</option>
      {% endfor %}
    </select>
  </div>

在 JS 中，我可以获得所有使用“elements[i].value”选择的值:

function hello() {
  var elements = document.getElementById('choices-multiple-remove-button');
  for(var i=0; i < elements.length; i++) {
    console.log(elements[i].value);
    console.log(elements[i].options[elements[i].selectedIndex].text);
    // Throw Error //
  }
}
document.getElementById("workingbutton").addEventListener("click", hello);

这里:

console.log(elements[i].options[elements[i].selectedIndex].text);

无法读取 HTMLButtonElement.hello 处未定义的属性“未定义”。请问我该怎么做？怎么了？

Answer 1

过滤选中的选项，然后获取其文本内容。为了将选项属性转换为数组，然后使用 Array#filter过滤所选选项的方法，最后使用 Array#map将选定选项中的文本值提取到数组中。

var element = document.getElementById('choices-multiple-remove-button');
console.log([...element.options].filter(ele => ele.selected).map(ele => ele.text));

<select id="choices-multiple-remove-button" class="form-control" name="choices-multiple-remove-button" placeholder="Compétences" multiple>
  <option value="1" selected>1</option>
  <option value="2" selected>2</option>
</select>