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

Question

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

我怎样才能做到这一点？

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

这将强制用户选择另一个选项以便能够提交表单，浏览器应根据需要render option：

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

但是，大多数浏览器会将其渲染为普通的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标签使用assign占位符，所以我不相信有任何方法可以完全满足你对纯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

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

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;
        }
});

OP2：

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