Angular 2的解决方案

Question

我正在尝试创建一个包含占位符的下拉列表。它似乎不像其他形式那样支持placeholder="stuff"。在我的下拉列表中有不同的方法来获取占位符吗？

Answer 1

是的，只是＆＃34;选择禁用＆＃34;在选项中。

<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

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果要查看列表中的第一个选项，请从css中删除display属性

Answer 4

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

noneSelectedText: 'Insert Placeholder text'

示例：如果您有：

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

在您的javascript中

，您可以像这样

初始化selectpicker

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

Answer 5

添加隐藏属性：

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

Answer 6

试试这个：

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

使用required + value=""时，用户无法选择它当用户打开选项框

时，使用hidden会使其隐藏在选项列表中

Answer 7

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

Answer 8

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

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

Answer 9

尝试@title =＆＃34;东西＆＃34;。它对我有用。

Answer 10

在bootstrap-select.js查找title: null,并将其删除。
在title="YOUR TEXT"元素中添加<select>。
很好：）

示例：

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

Answer 11

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

<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的第一个选项成为占位符，用户将无法再选择第一个选项。

希望它有所帮助!!

Answer 12

实现您正在寻找的正确方法是使用 title="Choose..."

例如：

<select class="form-contro selectpicker" name="example" title="Choose...">
    <option value="all">All Affiliate</option>
</select>

查看文档以获取有关以下参考的更多信息

custom-button-text

Answer 13

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

Answer 14

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

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

Answer 15

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

Answer 16

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

Answer 17

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

Answer 18

Bootstrap select具有noneSelectedText选项。您可以通过data-none-selected-text属性进行设置。 Documentation

Answer 19

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

Answer 20

这是另一种方法

<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选择下拉列表占位符

20 个答案:

Angular 2的解决方案