將選定和禁用的屬性添加到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('');