HTML选择框，在您选择其中任何一个之前都将显示空白

HTML select box with blank to be displayed until you select any of them

本文关键字：选择 显示 空白 HTML 任何一      更新时间：2023-09-26

想象一下下面的select 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>

这对来说很好

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

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

使用纯HTML无法做到这一点。查看MDN和W3C官方HTML5.x夜间版本：

  • https://developer.mozilla.org/en-US/docs/HTML/Element/select
  • http://www.w3.org/html/wg/drafts/html/master/forms.html#the-select元素

您确实需要使用JavaScript并在"fake"选项上使用所选属性来切换它。

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

全局

accesskey类内容可编辑上下文菜单目录可拖动dropzone隐藏id惰性拼写检查样式选项卡索引标题翻译

选择

自动对焦禁用形式多名称所需尺寸

更新

由于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/

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

<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>

现在选择Hardness.selectedIndex始终>0；

<option selected disabled value=''></option>

selected使此选项成为默认选项。disabled使此选项不可点击。

相关文章：