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

Default text which won't be shown in drop-down list

提问by Vitalii Ponomar

I have a selectwhich initially shows Select languageuntil the user selects a language. When the user opens the select, I don't want it to show a Select languageoption, because it's not an actual option.

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

How can I achieve this?

我怎样才能做到这一点？

回答by Nobita

Kyle's solutionworked perfectly fine for me so I made my research in order to avoid any Js and CSS, but just sticking with HTML. Adding a value of selectedto the item we want to appear as a header forces it to show in the first place as a placeholder. Something like:

Kyle 的解决方案对我来说非常好，所以我进行了研究以避免任何 Js 和 CSS，但只坚持使用 HTML。向selected我们希望显示为标题的项目添加值，强制它首先显示为占位符。就像是：

<option selected disabled>Choose here</option>

The complete markup should be along these lines:

完整的标记应该是这样的：

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

You can take a look at this fiddle, and here's the result:

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

If you do notwant the sort of placeholder text to appear listed in the options once a user clicks on the select box just add the hiddenattribute like so:

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

Check the fiddle hereand the screenshot below.

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

回答by Prabhu

Here is the solution:

这是解决方案：

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

回答by Oriol

The proper and semantic way is using a placeholder label option:

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

• Add an optionelement as the first child of the select
• Set value= ""to that option
• Set the placeholder text as the content of that option
• Add the requiredattribute to the select

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

This will force the user to select another option in order to be able to submit the form, and browsers should renderthe optionas desired:

这将迫使用户以选择另一个选项，以便能够提交表单，和浏览器应该呈现的option根据需要：

If a select element contains a placeholder label option, the user agent is expected to render that option in a manner that conveys that it is a label, rather than a valid option of the control.

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

However, most browsers will render it as a normal option. So we will have to do fix it manually, by adding the following to the option:

但是，大多数浏览器会将其呈现为正常的option. 因此，我们必须手动修复它，方法是将以下内容添加到option：

• The selectedattribute, to make it selectedby default
• The disabledattribute, to make it non-selectable by the user
• display: none, to hide it from the list of values

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

回答by Kyle

Because you can't use assign placeholders for selecttags, I don't believe that there is any way to do exactly what you're asking for with pure HTML/CSS. You can, however, do something like this:

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

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

"Select language" will show up in the dropdown, but once another option is selected it will not be possible to reselect it.

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

I hope that helps.

我希望这有帮助。

回答by Aakash

Try this:

尝试这个：

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

In the CSS:

在 CSS 中：

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

回答by Baldrick

I have a solution with a span displayed above the select until a selection done. The span displays the default message, and so it's not in the list of propositions:

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

HTML:

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:

CSS：

#default_message_overlay {
    position: absolute;
    display: block;
    width: 120px;
    color: grey;
}
select {
    width: 150px;
}

Javascript (with JQuery):

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

I've made a jsfiddle for demo. Tested with Firefox and IE8.

我为 demo制作了一个jsfiddle。用 Firefox 和 IE8 测试。

回答by Anders M.

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

you can of course move the css to a css file if you want, and put a script to catch the escbutton to select the disabled again. Unlike the other similar answers I put value="", this is so if you send the value(s) of your select list with a form, it won't contain "chose something". In asp.net mvc 5 sent as json compiled with var obj = { prop:$('#ddl').val(),...};and JSON.stringify(obj);the value of prop will be null.

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

回答by Ed Manz

Op1:

操作1：

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

Op2:

操作2：

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