选择多个选择选项的所有值-不适用于 E11 [重复]

Question

我正在使用具有多个属性的选择元素。这仅适用于 Firefox 和 Chrome，但不适用于 IE9/IE10 或 IE11。有什么建议让它也适用于 IE 浏览器吗？看起来 IE 不接受字符 =>

text += "problems: " + Array.from(document.getElementById("pq").options)
                        .filter(option => option.selected)
                        .map(option => option.value) + "\r\n" + "\r\n";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />

<form id "test">
  <select multiple="multiple" id="pq">
    <option id="pq1" value="Test">Test</option>
    <option id="pq2" value="TV">TV</option>
    <option id="pq3" value="Radio">Radio</option>
    <option id="pq4" value="Box">Box</option>
    <option id="pq5" value="Sound">Sound</option>
    <option id="pq6" value="Audio">Audio conversations</option>
    <option id="pq7" value="Cable">Cable</option>
  </select>
  <button type="submit" value="Submit">Submit</button>
</form>


<script>
  $('select[multiple]').multiselect()
</script>

Answer 1

IE 不支持箭头函数和Array.from()

您可以使用slice 将HTMLOptionsCollection 转换为数组，而不是使用Array.from()：

[].slice.call(<array like>)

并用

替换箭头功能

function(option) {
    return option.value
}

这是一个更新的小提琴。选择一些选项并单击提交以查看控制台中选择的值：

$('select[multiple]').multiselect()

$("#test").submit(function(event) {
  event.preventDefault();

  var values = [].slice.call(document.getElementById("pq").options)
    .filter(function(option) {
      return option.selected
    })
    .map(function(option) {
      return option.value
    }) + "\r\n" + "\r\n"

  console.log(values)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />

<form id="test">
  <select multiple="multiple" id="pq">
    <option id="pq1" value="Test">Test</option>
    <option id="pq2" value="TV">TV</option>
    <option id="pq3" value="Radio">Radio</option>
    <option id="pq4" value="Box">Box</option>
    <option id="pq5" value="Sound">Sound</option>
    <option id="pq6" value="Audio">Audio conversations</option>
    <option id="pq7" value="Cable">Cable</option>
  </select>
  <button type="submit" value="Submit">Submit</button>
</form>

Answer 2

您可以将代码重写为兼容 IE11 的 ES5：

.as-console-wrapper { max-height: 60px; overflow: auto; }

<select multiple="multiple" id="pq">
  <option id="pq1" value="Test">Test</option>
  <option id="pq2" value="TV">TV</option>
  <option id="pq3" value="Radio">Radio</option>
  <option id="pq4" value="Box">Box</option>
  <option id="pq5" value="Sound">Sound</option>
  <option id="pq6" value="Audio">Audio conversations</option>
  <option id="pq7" value="Cable">Cable</option>
</select>
<script>
  const pq = document.getElementById('pq');
  pq.addEventListener('change', function(event) {
    let text = "";
    text += "problems: " + Array.prototype
      .filter.call(pq.options, function(option) {
        return option.selected;
      })
      .map(function(option) {
        return option.value;
      }) + "\r\n" + "\r\n";
    console.log(text);

  })
</script>

或者您开始​​使用Babel 以及@babel/preset-env 和相应的.babelrc 文件。