Bootstrap选择下拉列表占位符

Question

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

Answer 1

是的只是选项中的"已选择已禁用".

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

链接到小提琴

你也可以在这里查看答案

/sf/answers/410145501/

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不支持它,但可以创建相同的效果,因此它看起来与其他输入占位符相同

    $('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中删除display属性

Answer 4

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

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

Answer 5

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

noneSelectedText: 'Insert Placeholder text'

例如：如果您有：

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

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

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

Answer 6

添加隐藏属性：

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

Answer 7

尝试这个：

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

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