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

过滤选定的选项，然后获取其文本内容。为了将options属性转换为数组，请使用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>

JavaScript selectedIndex多选文本

1 个答案: