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

Question

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

我怎样才能做到这一点？

Answer 1

Kyle's solution 对我来说工作得非常好，所以我进行了研究以避免任何 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>

你可以看看这个fiddle，结果如下：

如果您不希望在用户单击选择框后出现在选项中列出的占位符文本，只需添加 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>

查看fiddle here 和下面的屏幕截图。

Answer 2

解决办法如下：

<select>
    <option style="display:none;" selected>Select language</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Answer 3

正确的语义方式是使用placeholder label option：

• 添加一个option 元素作为select 的第一个子元素
• 将value= ""设置为option
• 将占位符文本设置为option的内容
• 将required 属性添加到select

这将迫使用户选择另一个选项以便能够提交表单，并且浏览器应根据需要renderoption：

如果选择元素包含占位符标签选项，则用户 代理应以传达该选项的方式呈现该选项 它是一个标签，而不是控件的有效选项。

但是，大多数浏览器会将其呈现为普通的option。所以我们必须手动修复它，将以下内容添加到option：

• selected 属性，默认为selected
• disabled 属性，使其无法被用户选择
• 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>

Answer 4

因为您不能为select 标签使用分配占位符，所以我认为没有任何方法可以完全按照您的要求使用纯 HTML/CSS。但是，您可以执行以下操作：

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

“选择语言”将显示在下拉菜单中，但一旦选择了另一个选项，将无法重新选择它。

希望对你有帮助。

Answer 5

试试这个：

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

在 CSS 中：

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

Answer 6

我有一个解决方案，其跨度显示在选择上方，直到选择完成。 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 for demo。用 Firefox 和 IE8 测试。

Answer 7

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

如果需要，您当然可以将 css 移动到 css 文件中，并放置一个脚本来捕获 esc 按钮以再次选择禁用。与我提出的value="" 的其他类似答案不同，如果您使用表单发送选择列表的值，它将不包含“选择某些东西”。在使用var obj = { prop:$('#ddl').val(),...}; 和JSON.stringify(obj); 编译为json 发送的asp.net mvc 5 中，prop 的值将为null。

Answer 8

Op1：

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

操作2：

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