select all values of multiple selction options - not working on E11

Question

i'm using a select element with multiple attributes. This only work for Firefox and Chrome but not for IE9/IE10 or IE11. Any suggestion to bring it also work for IE browsers? It looks like IE don't accept the character =>

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>

The snippet you're using isn't compatible with IE for multiple reasons. `Array.from(...)`, arrow function, etc. — Tyler Roper, Jul 23 '19 at 17:38
@TylerRoper i know that's why i'm asking if there is a other possibility ? as i know only this one.. thx for your support — James, Jul 23 '19 at 17:53
@adiga thank you but this solve not my issue... any other suggestion ? — James, Jul 23 '19 at 18:15

adiga · Accepted Answer · 2019-07-23T18:31:04.067

IE doesn't support arrow functions and Array.from()

Instead of using Array.from(), you could use slice to convert HTMLOptionsCollection to an array:

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

And replace arrow functions with

function(option) {
    return option.value
}

Here's an updated fiddle. Select some options and click on submit to see the values selected in the console:

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

connexo · Answer 2 · 2019-07-23T19:18:36.687

You can rewrite your code to IE11-compatible 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>

Or you start using Babel along with @babel/preset-env and the corresponding .babelrc file.

thank you so much but IE still don't accept it.. any other suggestions ? — James, Jul 23 '19 at 19:04
I just checked in my own IE 11 and the code does exactly what your code is supposed to do. **Works flawlessly in IE 11.** — connexo, Jul 23 '19 at 19:16

select all values of multiple selction options - not working on E11

2 Answers2