Question

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

我怎样才能做到这一点？

Answer 1

Kyle's solution对我来说非常好，所以我进行了研究以避免任何J和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标记使用分配占位符，所以我不相信有任何方法可以完全按照您的要求使用纯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=""的其他类似答案不同，如果您使用表单发送选择列表的值，则不会包含＆＃34;选择了某些内容＆＃34;。在使用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');

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

8 个答案: