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

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

我该如何实现？

凯尔（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>

您可以看一下这个小提琴，结果如下：

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

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

解决方法如下：

<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元素包含占位符标签选项，则预期用户代理以传达其为标签而非控件的有效选项的方式呈现该选项。

但是，大多数浏览器会将其呈现为normal option。因此，我们必须通过将以下内容添加到中来手动进行修复option：

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

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

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

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

希望对您有所帮助。

试试这个：

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

在CSS中：

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

我有一个解决方案，在选择上方显示跨度，直到选择完成。跨度显示默认消息，因此不在提议列表中：

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的测试。

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

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

Op1：

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

Op2：

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