【问题标题】：Bootstrap select dropdown list placeholderBootstrap 选择下拉列表占位符
【发布时间】：2014-05-14 09:13:06
【问题描述】：

我正在尝试制作一个包含占位符的下拉列表。它似乎不像其他形式那样支持placeholder="stuff"。是否有其他方法可以在我的下拉菜单中获取占位符？

【问题讨论】：

【解决方案1】：

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

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

Link to fiddle

您也可以在

查看答案

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

【讨论】：

这不能回答问题，因为他/她要求的是引导程序内置解决方案
您也可以使用disabled selected hidden 或仅使用hidden 都是正确的。 :)

【解决方案2】：

使用隐藏：

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

【讨论】：

继续上一条评论，使用v-model时，需要使用这个：

【解决方案3】：

dropdown 或 select 没有占位符，因为 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 中删除显示属性

【讨论】：

您在添加“选定禁用”类时编写了大量自定义代码。
值得称赞的是，他的视觉更完整（代码更多），其中占位符不在列表选择中呈现。虽然我正在寻求最少的代码方式。

【解决方案4】：

大多数选项对于多选都有问题。放置 Title 属性，并将第一个选项设为 data-hidden="true"

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

【讨论】：

如果您使用的是 bootstrap-select JS 插件，这是正确的答案。默认情况下，在我的 dotnet core webapp 中，它不允许我选择第一项。但是，当我按照建议使用“标题”时，在使用这个工作和选择元素而不是使用“占位符”之后，它工作得非常完美！谢谢。

【解决方案5】：

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

noneSelectedText: 'Insert Placeholder text'

例子：如果你有：

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

在你的 javascript 中，你像这样初始化选择器

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

【讨论】：

我认为这是迄今为止最好的答案。

【解决方案6】：

添加隐藏属性：

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

【讨论】：

这与Jay Lin's answer 和Brakke's answer 有何不同？
这对我来说效果最好，因为选中意味着它默认被选中，禁用所以不能被点击，并且从下拉列表中隐藏。我确实认为如果使用 hidden ， disabled 可能不需要在那里。

【解决方案7】：

试试这个：

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

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

【讨论】：

强烈推荐！
不使文本变灰。在选项中添加class="text-muted" 没有帮助。添加disabled 可以防止它被自动选择。

【解决方案8】：

试试@title = "stuff"。它对我有用。

【讨论】：

一个完美的例子

【解决方案9】：

所有这些选项都是....即兴创作。 Bootstrap 已经为此提供了解决方案。如果要更改所有下拉元素的占位符，可以更改

的值

noneSelectedText 在引导文件中。

要单独更改，可以使用 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>

【讨论】：

您先生刚刚救了我。以上所有选项都不适用于多选。由于选择没有取消选择以前的值。标题对我有用

【解决方案10】：

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

【讨论】：

【解决方案11】：

在bootstrap-select.js 中找到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>

【讨论】：

【解决方案12】：

我认为，带有类和 JQuery 代码以禁用用户选择的第一个选项的下拉框将完美地用作 选择框占位符。

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

这将使下拉菜单的第一个选项成为占位符，用户将无法再选择第一个选项。

希望对你有帮助！！

【讨论】：

【解决方案13】：

实现您所寻找的正确方法是使用 title 属性。 title 全局属性包含表示与其所属元素相关的咨询信息的文本。

title="Choose..."

例如：

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

查看文档以获取有关 bootstrap-select 的更多信息

custom-button-text

【讨论】：

【解决方案14】：

这是另一种方法

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

“选择平台”成为占位符，“必需”属性确保用户必须选择其中一个选项。

非常有用，当您不想使用字段名称或标签时。

【讨论】：

【解决方案15】：

引导选择有一个noneSelectedText 选项。您可以通过data-none-selected-text 属性设置它。 Documentation.

【讨论】：

【解决方案16】：

对于.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>

【讨论】：

【解决方案17】：

使用引导程序，如果您还需要为选项添加一些值以用于过滤器或其他内容，您只需将类“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 属性中。

【讨论】：

【解决方案18】：

Angular 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 允许您在单击标签时显示选择，在您选择选项时隐藏。

angular html css

【讨论】：

【解决方案19】：

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

您可以将defaultValue 替换为selected，但这会发出警告。

【讨论】：

【解决方案20】：

这是针对Bootstrap 4.0的，你只需要在第一行输入selected，它作为一个占位符。这些值不是必需的，但如果你想添加值 0-... 这取决于你。比您想象的要简单得多：

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

This is link will guide you for further information.

【讨论】：