Question

不确定为什么这不起作用。我必须遗漏一些基本的东西。

<div class="input-group">
   <select id="mySelect" class="selectpicker form-control" title="Please select a type of fruit…">
        <option>Apple</option>
        <option>Pear</option>
        <option>Banana</option>
        <option>Orange</option>
    </select>
</div>

我希望它显示“请选择一种水果......”，直到用户选择一个。它显示“Apple”。

我做错了什么？

Answer 1

您需要再创建一个选项元素，可能包含空值：

<select id="mySelect" class="selectpicker form-control">
    <option value="">Please select a type of fruit</option>
    <option value="apple">Apple</option>
    <option value="pear">Pear</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
</select>

title属性仅提供有关鼠标悬停的其他信息。

Answer 2

另一个选项是将其设置为多选下拉，但将所选项目的数量限制为1 。

<select id="mySelect" class="selectpicker form-control" multiple data-max-options="1" title="Please select a type of fruit…">
    <option value="apple">Apple</option>
    <option value="pear">Pear</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
</select>

Answer 3

您可以尝试添加notooltip；不知道这是否也适用于单项选择，但是您可以将其与Nikhil的建议结合起来以将data-max-options限制为1：

<select class="form-control selectpicker notooltip"
        id="mySelect" title="Please select a type of fruit"
        multiple data-max-options="1">
  {% for opt in form.fruit %}
    {{ opt }}
  {% endfor %}
</select>

Answer 4

实际上，你没有错！如果您的标题没有显示，您可以删除标题并添加另一个选项 data-hidden =“true”和禁用属性。 Demo

<select id="mySelect" class="selectpicker form-control">
   <option data-hidden="true" value="" disable>Please select a type of fruit…</option>
   <option value="apple">Apple</option>
   <option value="pear">Pear</option>
   <option value="banana">Banana</option>
   <option value="orange">Orange</option>
</select>

bootstrap selectpicker标题没有显示

4 个答案: