javascript - 如何判断选择列表是否在 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 确实选择了它，所以我不能说它没有被选中。

这是一个 fiddle ，它验证了我可以区分 FF 和 Chrome 中的两种情况，但不能区分 IE:http://jsfiddle.net/YvfpV/7/

在 IE 8 中有什么方法可以区分这两种情况吗？

Answer 1

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

但是，如果没有选项具有 selected 属性(即没有 preselected )，浏览器可能会默认选择一个选项。因此，建议一个选项具有 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 中的明显逻辑不适用于指定浏览器的那些版本。