Twitter Bootstrap Question posted in

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

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) + "rn" + "rn";
<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>
Tags:

2

Answers


  1. 0

    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
    }) + "rn" + "rn"

  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>
    Login or Signup to reply.
  2. 0

    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;
      }) + "rn" + "rn";
    console.log(text);

  })
</script>

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search