javascript - Cannot submit form with <select multiple required> in Internet Explorer -

on first submission, no option in <select> selected, causing html5 validation fail, preventing submission altogether.

however, if select option via javascript, submission still fails on subsequent submission.

it succeeds if manually select option other ones selected (or if deselect , reselect them).

bug or feature? known behavior or documented somewhere? couldn't find references.

var done = false;  $(document).ready(function() {    $("#s").on("click", function() {      if (done) {        return;      }        // run once      done = true;      settimeout(function() {        $("#a").prop("selected", true);        console.log($("#x").val());      }, 100); // delay prevent submission set option    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <form method="get">    <select id="x" name="x" required="required" multiple="multiple">      <option value="a" id="a">anton</option>      <option value="b">berta</option>    </select>      <input id="s" type="submit" name="btn" value="submit" />  </form>

it seems has setting .prop on <option>.

when set selectedindex on select input, works. check updated fiddle:

document.getelementbyid('btn-select').addeventlistener('click', function() {     var select = $("#x")[0];      // select first 1     // select.selectedindex = 0;      // or loop through options , select based on condition     (var = 0; < select.options.length; i++) {         if (select.options[i].value === 'b') {             select.selectedindex = i;             return;         }     } }) 

https://jsfiddle.net/5hbey7en/8/

so example become:

var done = false; $(document).ready(function() {   $("#s").on("click", function() {     if (done) {       return;     }      // run once     done = true;     settimeout(function() {       $("#x")[0].selectedindex = 0;       console.log($("#x").val());     }, 100); // delay prevent submission set option   }); });