Adding selected and disabled attributes to an option tag in IE 11

Question

I'm trying to debug some code that doesn't display properly. The code should add a default option to an drop down list that is disabled from selection. What I get is that the list option is displayed but not selected by default. After the page is loaded I inspect element on that list box and I am shown the following html for the first item of the list:

<option value="" disabled="">

When I select edit as HTML the tag expands to

<option value="" disabled="" selected="">

By simply creating a local html file using the tag with selected="" I can get the desired results but I'm not sure why it doesn't appear in the inspector until I select edit as HTML.

Here is the rest of the code pertaining to this issue:

<div class='input-block smallish' id="inquiry-type">
  <span class='label'>
    Inquiry Type <span>(required)</span>
  </span>
  <div>
    <select class="default xl" id="ticket_custom1" name="ticket[custom1]">
    <option value="Problem Report">Problem Report</option>
    <option value="Usage or Technical Question">Usage or Technical Question</option>
    <option value="Enhancement Request">Enhancement Request</option>
    <option value="New Project Idea">New Project Idea</option>
    <option value="Other">Other</option></select>
  </div>
</div>

<script>
    ...
    // Add our default for lists
    $('.input-block:not(.disable-default) select').prepend('<option value="" disabled selected>-- Select one --</option>');
    ...
</script>

There are more scripts but I don't think they pertain to this error. Also I get the desired results in Chrome.

Answer 1

There definitely does appear to be a difference between Internet Explorer and Chrome/Firefox. That being said, you can avoid this issue by explicitly setting the selectedIndex of the element itself:

$( "select" ).prop( "selectedIndex", 0 );

I'll file an Interop bug internally on this to have our team look into the issue and make a determination as to what the appropriate behavior should be.

Fiddle: http://jsfiddle.net/qtcs1kxe/1/
Feature Test: http://jsfiddle.net/jonathansampson/ub1yt4vv/show

Answer 2

I guess IE11 doesn't notice the selected attribute when you're appending after rendering.

You'll need to select the option in your script. Just add val('') to the end of your prepend. Works for me.

$('.input-block:not(.disable-default) select').prepend('<option value="" disabled selected>-- Select one --</option>').val('');