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

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

<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

使用隐藏：

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

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中删除显示属性

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

noneSelectedText: 'Insert Placeholder text'

例如：如果您有：

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

在您的JavaScript中，您可以像这样初始化selectpicker

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

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

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

添加隐藏属性：

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

试试这个：

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

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

尝试@title =“ stuff”。它为我工作。

所有这些选择都是……即兴创作。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>

1. 在“ bootstrap-select.js查找title: null, 并删除”中。
2. 添加title="YOUR TEXT"的<select>元素。
3. 很好:)

例：

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

我认为，具有用于禁用用户选择的第一个选项的类和JQuery代码的下拉框将非常适合作为Select 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>

这将使Dropdown的第一个选项成为占位符，并且用户将不再能够选择第一个选项。

希望能帮助到你！！

这是另一种方式

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

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

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

使用Bootstrap，这是您可以做的。使用“文本隐藏”类，禁用的选项将首先显示，但不在列表中。

<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属性进行设置。 文件资料。

对于.html页面

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

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

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

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

角度的 html 的CSS

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

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