title: Selected attribute of select options is not updating automatically
body: <p>I have multiple selects on my page, each has multiple options.
  However, If I select an option then the attribute <code>selected</code> of the option is not updating. Shouldn't this happen automatically?!</p>
  
  <p><strong>Example:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="browsers"&gt;
    &lt;option value="Firefox"&gt;Bing&lt;/option&gt;
    &lt;option value="InternetExplorer" selected="selected"&gt;Internet Explorer&lt;/option&gt;
    &lt;option value="Chrome"&gt;Chrome&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>By inspecting the DOM with the developer console, you should see, that the selected attribute is not changing even after selecting another option.</p>
  
  <p>However I found a workaround. To solve this issue we can use this code:</p>
  
  <pre><code>$(document).on("change","select",function() {
      $("option[value=" + this.value + "]", this)
          .attr("selected", true).siblings()
          .removeAttr("selected")
  });
  </code></pre>
  
  <hr>
  
  <p><strong>Example:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(document).on("change","select",function() {
       $("option[value=" + this.value + "]", this)
        .attr("selected", true).siblings()
        .removeAttr("selected")
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;select id="browsers"&gt;
        &lt;option value="Firefox"&gt;Bing&lt;/option&gt;
        &lt;option value="InternetExplorer" selected="selected"&gt;Internet Explorer&lt;/option&gt;
        &lt;option value="Chrome"&gt;Chrome&lt;/option&gt;
      &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works kind of. However, If I select another option than the default option, e.g. Chrome and reload the page, then the option Chrome is still selected even after reload, BUT the selected attribute still points to Internet Explorer!</p>
  
  <p>Which is the best approach to solve this?
  My idea is to run through all selects on <code>$(document).ready()</code> and select the option where the selected attribute points to.</p>
  
  <p>But why does this all not happen automatically?
  Is it a bug or a feature?</p>