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

时间:2014-12-03 23:52:43

标签: javascript jquery html internet-explorer

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

<option value="" disabled="">

当我选择编辑为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中获得了理想的结果。

2 个答案:

答案 0 :(得分:2)

Internet Explorer和Chrome / Firefox之间肯定存在差异。话虽这么说,你可以通过明确设置元素本身的selectedIndex来避免这个问题:

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

我会在内部提交一个Interop错误,让我们的团队调查问题并确定应该采取的适当行为。

小提琴:http://jsfiddle.net/qtcs1kxe/1/
特征测试:http://jsfiddle.net/jonathansampson/ub1yt4vv/show

答案 1 :(得分:1)

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

您需要在脚本中选择该选项。只需将val('')添加到前置文件的末尾即可。适合我。

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