小开

最佳答案

是的，只是在选项中“选择禁用”。

<select>
<option value="" selected disabled>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>

连上小提琴

你也可以在

Https://stackoverflow.com/a/5859221/1225125

小开

下拉列表或者选择没有占位符，因为 HTML 不支持它，但是可以创建相同的效果，使它看起来与其他输入占位符相同

    $('select').change(function() {
if ($(this).children('option:first-child').is(':selected')) {
$(this).addClass('placeholder');
} else {
$(this).removeClass('placeholder');
}
});

.placeholder{color: grey;}
select option:first-child{color: grey; display: none;}
select option{color: #555;} // bootstrap default color

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control placeholder">
<option value="">Your Placeholder Text</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>

如果您想看到列表中的第一个选项，请从 css 中删除显示属性

小开

试试@title = “ stuff”这招对我很管用。

小开

还有一个办法

<select name="GROUPINGS[xxxxxx]" style="width: 60%;" required>
<option value="">Choose Platform</option>
<option value="iOS">iOS</option>
<option value="Android">Android</option>
<option value="Windows">Windows</option>
</select>

"Choose Platform" becomes the placeholder and the 'required' property ensures that the user has to select one of the options.

非常有用，当你不想用户字段名或标签。

小开

使用隐藏:

<select>
<option hidden >Display but don't show in list</option>
<option> text 1 </option>
<option> text 2 </option>
<option> text 3 </option>
</select>

小开

试试这个:

<select class="form-control" required>
<option value="" selected hidden>Select...</option>

当使用 required + value=""时，用户无法选择它当用户打开选项框时，使用 hidden将使其隐藏在选项列表中

小开

添加隐藏属性:

<select>
<option value="" selected disabled hidden>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>

小开

使用 Bootstrap，这就是你能做的。使用类“ text-hide”，禁用选项将首先显示，但不显示在列表中。

<select class="form-control" >
<option selected disabled class="text-hide">Title</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>

小开

Bootstrap select 有一个 noneSelectedText选项。您可以通过 data-none-selected-text属性设置它。文件。

小开

所有这些选择都是... 即兴发挥。 Bootstrap 已经为此提供了一个解决方案。如果要更改所有下拉列表元素的占位符，可以更改

NoneSelectedText in the bootstrap file.

若要单独更改，可以使用 TITLE 参数。

例如:

<div class="form-group">
<label class="control-label col-xs-2" id="country">Continent:</label>
<div class="col-xs-9">
<select name="zones[]" class="selectpicker" title="All continents" id="zones" multiple >
<option value="Africa">Africa</option>
<option value="Asia">Asia</option>
<option value="North America">America North</option>
<option value="South America">America South</option>
<option value="Antarctica">Antarctica</option>
<option value="Australia">Australia</option>
<option value="Europe">Europe</option>
</select>
</div>
</div>

小开

.html页

<select>
<option value="" selected disabled>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>

用于 .jsp或任何其他 servlet 页面。

<select>
<option value="" selected="true" disabled="true">Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>

小开

找到 title: null,并删除它。
在 <select>元素中加入 title="YOUR TEXT"。
好吧:)

例如:

<select title="Please Choose one item">
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>

小开

I think, the Dropdown box with a class and JQuery code to disable the first option for user to select, will work perfectly as 选择 Box 占位符.

<select class="selectboxclass">
<option value="">- Please Select -</option>
<option value="IN">India</option>
<option value="US">America</option>
</select>

让 JQuery 禁用第一个选项。

<script>
$('select.selectboxclass option:first').attr('disabled', true);
</script>

这将使第一个选项下拉作为占位符和用户将不再能够选择第一个选项。

希望能有帮助! ！

小开

如果通过 javascript 初始化 select 字段，可以添加以下内容来替换默认的占位符文本

noneSelectedText: 'Insert Placeholder text'

example: if you have:

<select class='picker'></select>

在 javascript 中，初始化 selectpicker 如下所示

$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});

小开

对于多重选择，大多数选项都存在问题。放置 Title 属性，并将第一个选项设置为 data-hide = “ true”

<select class="selectpicker" title="Some placeholder text...">
<option data-hidden="true"></option>
<option>First</option>
<option>Second</option>
</select>

小开

使用 bootstrap，如果您还需要添加一些值到用于过滤器或其他东西的选项中，您可以简单地将类“ bs-title-option”添加到您希望作为占位符的选项中:

<select class="form-group">
<option class="bs-title-option" value="myVal">My PlaceHolder</option>
<option>A</option>
<option>B</option>
<option>c</option>
</select>

Bootstrap 将此类添加到 title属性。

小开

角度2的解

在选择的顶部创建一个标签

<label class="hidden-label" for="IsActive"
*ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
[(ngModel)]="filterIsActive" id="IsActive">
<option value="true">true</option>
<option value="false">false</option>
</select>

并应用 CSS 将其置于顶部

.hidden-label {
position: absolute;
margin-top: .34rem;
margin-left: .56rem;
font-style: italic;
pointer-events: none;
}

pointer-events: none allows you to display the select when you click on the label, which is hidden when you select an option.

有角度 Html = a href = “/questions/tags/css”class = “ post-tag”title = “ show questions tag & # 39; css & # 39;”rel = “ tag”> css

小开

<option value="" defaultValue disabled> Something </option>

你可以用 selected代替 defaultValue，但是这会给出警告。

小开

这是为 Bootstrap 4.0，您只需要输入选择的第一行，它充当占位符。这些值不是必需的，但是如果您想要添加值0-... ，那取决于您。比你想象的要简单得多:

<select class="custom-select">
<option selected>Open This</option>
<option value="">1st Choice</option>
<option value="">2nd Choice</option>
</select>

这是链接将指导您进一步的信息。

小开

实现所需内容的正确方法是使用 title 属性。 Title global 属性包含表示与其所属元素相关的咨询信息的文本。

title="Choose..."

for example:

<select class="form-control selectpicker" name="example" title="Choose...">
<option value="all">ABCDEFG</option>
<option value="all">EFG</option>
</select>

check the documentation for more info about bootstrap-select

自定义按钮文本

引导程序选择下拉列表占位符

角度2的解