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

Question

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

我怎样才能做到这一点？

Answer 1

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>

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

Answer 2

这是解决方案:

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

Answer 3

正确和语义的方式是使用占位符标签选项:

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

这将迫使用户选择以另一种选择能够提交表单,和浏览器应该呈现的option如期望的那样:

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

但是,大多数浏览器都会将其渲染为正常情况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>

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

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

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测试.