如何判断 IE 8 中的选择列表是否没有选择任何内容？

Question

如何在 IE 8 中使用 JavaScript 来区分选择了第一项的选择列表和未选择任何内容的选择列表？

<select id="first">
    <option>John</option>
    <option>Paul</option>
</select>

<select id="second">
    <option selected="selected">George</option>
    <option>Pete</option>
</select>

浏览器呈现第一个列表，其中显然选择了“John”。在 Chrome 和 Firefox 中，该选项未正确选择：CSS 选择器找不到它，所以我可以看出它没有被选择。但是，IE 8 确实正确选择了它，所以我不能说它没有被选择。

这是一个小提琴，它验证我可以区分 FF 和 Chrome 中的两种情况之间的区别，但不能区分 IE： http ://jsfiddle.net/YvfpV/7/

有没有办法在 IE 8 中区分这两种情况？

Answer 1

如果未选择任何选项，则选择元素的 selectedIndex 属性将为-1。

但是，如果没有选项具有选定的属性（即没有一个 预选），浏览器可能会默认选择一个选项。因此，建议一个选项具有 selected 属性，这样您就知道默认情况下会选择哪一个，并且永远不应该出现没有选择任何选项的情况。

您无法可靠地确定用户是否选择了该选项或仅使用了默认选项，因此请勿将您的逻辑建立在了解这一点的基础上。

编辑

<form onsubmit="return false">
  <select id="sel0">
    <option>0
    <option>1
  </select>
  <button onclick="
    var sel = document.getElementById('sel0');
    alert('selectedIndex: ' + sel.selectedIndex +  // 0
          '\noptions[0].selected: ' + sel.options[0].selected); // true
    ">hey</button>
  <input type="reset">
</form>

在 Firefox 5 和 Chrome 14 中，选择的默认状态是 selecteIndex == 0 且第一个选项的 selected 属性 == true。因此，OP 中的明显逻辑并不适用于指定浏览器的这些版本。