将选定和禁用的属性添加到IE 11中的选项标签

Question

我正在尝试调试一些无法正常显示的代码。 该代码应将一个默认选项添加到一个下拉列表中，该列表被选中。 我得到的是列表选项已显示，但默认情况下未选中。 页面加载后，我检查该列表框上的元素，并为列表的第一项显示以下html：

<option value="" disabled="">

当我选择将HTML编辑为HTML时，标记会展开

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

通过使用带有selected=""标记的标签简单地创建本地html文件，可以获得所需的结果，但是我不确定为什么直到选择HTML编辑后它才出现在检查器中。

以下是与此问题有关的其余代码：

<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>

还有更多脚本，但我认为它们与该错误无关。 另外，我在Chrome浏览器中获得了预期的结果。

Answer 1

Internet Explorer和Chrome / Firefox之间肯定确实存在差异。 话虽如此，您可以通过显式设置元素本身的selectedIndex来避免此问题：

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

我将在内部为此提交一个Interop错误，以使我们的团队调查该问题并确定应采取的适当行为。

小提琴： http : //jsfiddle.net/qtcs1kxe/1/
功能测试： http : //jsfiddle.net/jonathansampson/ub1yt4vv/show

Answer 2

我猜想IE11在渲染后追加时不会注意到selected属性。

您需要在脚本中选择选项。 只需在您的前缀末尾添加val('') 。 为我工作。

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