引导程序selectpicker标题未显示

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>

我希望它显示"请选择一种水果…"，直到用户选择一种。它正在显示"苹果"。

我做错了什么？

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

实际上，您没有做错！如果你的标题没有显示，你可以去掉标题，添加另一个选项，其中数据隐藏="true"和禁用属性。演示

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