下拉列表中不会显示的默认文本

我有一个 select，它最初显示 选择语言，直到用户选择一种语言。当用户打开选择时，我不希望它显示 选择语言选项，因为它不是一个实际的选项。

我怎么才能做到呢？

281869 次浏览
小开

因为您不能为 select标记分配占位符，所以我不认为有任何方法可以完全满足您对纯 HTML/CSS 的要求。然而，你可以这样做:

<select>
<option disabled="disabled">Select language</option>
<option>Option 1</option>
</select>

“选择语言”将显示在下拉列表中，但一旦另一个选项被选中，将不可能重新选择它。

希望能帮上忙。

小开

我有一个解决方案的跨度上方显示的选择，直到选择完成。Span 显示默认消息，因此它不在命题列表中:

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 和 IE8测试过。

小开

Kyle 的解决方案 对我来说非常好用，所以我做了研究，以避免任何 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>

你可以看看这个 小提琴，这是结果:

enter image description here

如果 不要希望在用户单击选择框时，选项中列出占位符文本的排序，那么只需像下面这样添加 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>

检查 在这里拉小提琴和下面的截图。

enter image description here

小开

试试这个:

<div class="selectSelection">
<select>
<option>Do not display</option>
<option>1</option>
<option>1</option>
</select>
</div>

在 CSS 中:

.selectSelection option:first-child{
display:none;
}
小开

解决办法如下:

<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

这将迫使用户选择另一个选项，以便能够提交表单，浏览器应该 呈现的 option所需要的:

如果 select 元素包含占位符标签选项，则用户 代理期望以一种方式提供该选项，以传达 它是一个标签，而不是控件的有效选项。

然而，大多数浏览器会将其呈现为一个正常的 option。因此，我们将不得不手动修复它，通过添加以下到 option:

select > .placeholder {
display: none;
}
<select required>
<option class="placeholder" selected disabled value="">Select language</option>
<option>Option 1</option>
<option>Option 2</option>
</select>

小开 
<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>

你当然可以移动 css 到 css 文件，如果你想，并把脚本捕捉 esc按钮选择禁用。不同于其他类似的答案，我把 value=""，这是因为如果你发送的价值，你的选择列表与形式，它不会包含“选择的东西”。在 asp.net 中，mvc 5作为 json 发送，并使用 var obj = { prop:$('#ddl').val(),...};和 JSON.stringify(obj);编译，其道具的值将为 null。

小开

作品一:

$("#MySelectid option").each(function () {
if ($(this).html() == "text to find") {
$(this).attr("selected", "selected");
return;
}
});

作品二:

$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; })​​​​​​​​.attr('selected','selected');​​​​​​​
小开

要回答您的问题，直接使用此代码的选项，您不希望它出现在选项列表:

<option value="" hidden selected>Select Language</option>

提交答案