显示空白的 HTML 选择框，直到您选择其中任何一个

Question

想象一下下面的一个选择的 HTML 元素：

<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>

我希望在呈现此 DOM 元素时，所选值应为空白，而不是 4 个水果中的任何一个。
我不想包含空白作为另一种选择。
是否可以？

那是我不想添加另一个项目，如：

<select id="mySelect">
  <option>Select an item </option>
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>

或者

<select id="mySelect">
 <option></option>
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>

Answer 1

这对你有用

使用这个 HTML

<select id="mySelect">
    <option>Apple</option>
    <option>Orange</option>
    <option>Pineapple</option>
    <option>Banana</option>
</select>

在 jQuery 中使用

$('#mySelect').prop('selectedIndex', -1);

Javascript 版本（在最新的 chrome、firefox 和 IE 11 上测试）

document.getElementById("mySelect").selectedIndex = -1

这应该使下拉列表显示为空白而不向列表添加额外的空白选项