HTMLselect：如何设置默认文本不会显示在下拉列表中？
我有一个select ，最初显示select语言，直到用户select一种语言。 当用户打开select，我不希望他们看到select语言选项，因为它不是一个选项。
凯尔的解决scheme对我来说工作得非常好，所以我做了我的研究，以避免任何Js和CSS，但只是坚持HTML。 将selected的值添加到我们想要作为标题出现的项目，强制它首先显示为占位符。 就像是：
<option selected disabled>Choose here</option>
完整的标记应该是这样的：
<select> <option selected disabled>Choose here</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select>
你可以看看这个小提琴 ，结果如下：
如果您不希望某种占位符文本出现在选项中，那么只要用户单击select框，只需添加如下所示的hidden属性即可：
<select> <option selected disabled hidden>Choose here</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> </select>
检查小提琴在这里和下面的截图。
这是解决scheme：
<select> <option style="display:none;" selected>Select language</option> <option>Option 1</option> <option>Option 2</option> </select>
正确和语义的方式是使用占位符标签选项 ：
- 添加一个
option元素作为select的第一个孩子 - 设置
value= ""该option - 将占位符文本设置为该
option的内容 - 将
required属性添加到select
这将强制用户select另一个选项以便能够提交表单，并且浏览器应该根据需要呈现该option ：
如果select元素包含一个占位符标签选项，那么用户代理将以传达它为标签的方式呈现该选项，而不是控件的有效选项。
但是，大多数浏览器将把它作为一个正常的option 。 所以我们将不得不手动修复它，通过添加以下option ：
-
selected属性，使其被默认选中 -
disabled属性，使其无法由用户select -
display: none，将其从值列表中隐藏
select > .placeholder { display: none; }
<select required> <option class="placeholder" selected disabled value="">Select language</option> <option>Option 1</option> <option>Option 2</option> </select>
因为你不能使用指定的占位符来select标签，所以我不认为有任何方法可以完全满足你对纯HTML / CSS的要求。 但是，你可以这样做：
<select> <option disabled="disabled">Select language</option> <option>Option 1</option> </select>
“select语言”将出现在下拉菜单中，但是一旦select了其他选项，就不能重新select它。
我希望有帮助。
我有一个解决scheme，select上面显示的跨度，直到完成select。 跨度显示默认消息，因此它不在命题列表中：
HTML：
<span id="default_message_overlay">Default message</span> <select id="my_select"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
CSS：
#default_message_overlay { position: absolute; display: block; width: 120px; color: grey; } select { width: 150px; }
Javascript（与JQuery）：
$(document).ready(function() { // No selection at start $('#my_select').prop("selectedIndex", -1); // Set the position of the overlay var offset = $('#my_select').offset(); offset.top += 3; offset.left += 3; $('#default_message_overlay').offset(offset); // Remove the overlay when selection changes $('#my_select').change(function() { if ($(this).prop("selectedIndex") != -1) { $('#default_message_overlay').hide(); } }); });
我已经做了一个演示的jsfiddle 。 经过Firefox和IE8testing。
尝试这个：
<div class="selectSelection"> <select> <option>Do not display</option> <option>1</option> <option>1</option> </select> </div>
在CSS中：
.selectSelection option:first-child{ display:none; }
<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>
你当然可以将CSS移动到一个CSS文件，如果你想要的话，并把一个脚本来抓住escbutton，再次select禁用。 不像其他类似的答案，我把value="" ，这是如此，如果你发送你的select列表的值与表单，它不会包含“select的东西”。 在asp.net mvc 5中，以json编译方式发送var obj = { prop:$('#ddl').val(),...}; 和JSON.stringify(obj); prop的值将为null。
