4

想象一下下面的一个选择 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>
4

4 回答 4

5

这对你来说很好

使用此 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

这应该使下拉列表显示为空白，而无需在列表中添加额外的空白选项

于 2013-03-26T22:07:30.677 回答
4

你不能用纯 HTML 做到这一点。检查 MDN 和官方 W3C HTML5.x nightly build：

您确实需要使用 JavaScript 将其切换出来，并在“假”选项上使用 selected 属性。

这些是<select>元素的属性（属性）的可用性：

全球的

accesskey class contenteditable contextmenu dir draggable dropzone hidden id inert spellcheck style tabindex title translate

选择

自动对焦禁用表单多个名称所需大小

更新

由于 OP 似乎允许 JavaScript 作为替代方案，而不是 jQuery，我添加了一个普通的 JavaScript 示例来添加一个空的（选定的）选项标签；

var fakeOpt = document.createElement('option');
var myList = document.getElementById('mySelect');

fakeOpt.selected = 'selected';
myList.insertBefore(fakeOpt, myList[0]);

// Listen to a change
myList.onchange = function(evt){
    var clicked_option = myList.options[myList.selectedIndex].text;

    if (clicked_option.trim() != '') {
        console.log(clicked_option);
    }
    else {
        console.log('Empty option selected');
    }
};

这样就无需在 HTML 代码中手动填写。

这是一个 JSfiddle；http://jsfiddle.net/VjCbE/3/

于 2013-03-26T22:03:44.513 回答
3

我刚刚找到了一个非常漂亮的解决方案：

<pre>
<label for="hardness">Select the hardness</label> : 
    <select name="hardness" id="hardness">
        <option selected="selected" disabled="disabled"></option>
        <option value="3">Easy</option>
        <option value="6">Medium</option>
        <option value="10">Hard</option>
    </select>
</pre>

现在 selectHardness.selectedIndex 总是 > 0;

于 2014-08-13T09:47:37.947 回答
2 
<option selected disabled value=''></option>

selected将此选项设为默认选项。 disabled使该选项无法点击。

于 2015-11-19T09:08:55.963 回答