如何使用引导选择为“选择”多个框制作占位符？答案

【问题标题】：How do I make a placeholder for a 'select' multiple box using bootstrap-select?如何使用引导选择为“选择”多个框制作占位符？
【发布时间】：2019-01-29 07:58:45
【问题描述】：

如何使用 bootstrap-select 在具有多个选项的选择输入上放置一个占位符？选择第一个选项的通常方法不起作用，因为添加了其他选择的选项。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple>
  <option value="" disabled selected hidden>Type</option>
  <option value="">Type 1</option>
  <option value="">Type 2</option>
  <option value="">Type 3</option>
  <option value="">Type 4</option>
</select>

有一个类似的问题，但该解决方案不适用于多选框。

How do I make a placeholder for a 'select' box?

【问题讨论】：

刚刚测试...并设置属性multiple 我最初看到所有选项。那么，当所有选项最初都可见时，您期望占位符应该是什么样子？
我不希望占位符/第一个选项被选中或可选择，它不应该显示在下拉菜单中
当我运行 sn-p 时，没有选择“类型”选项或选择不可见。我只看到四个选项（Type 1 - 4）
哎呀我忘了提到我正在使用引导选择，我已经更新了问题。谢谢
您应该编辑您的问题，并在 bootstrap-select cdn 链接中包含一个有效的 sn-p，以便人们可以看到您真正在说什么。 <select multiple> 的大多数标准浏览器实现不包括占位符通常所在的单个下拉列表。

标签： html bootstrap-select

【解决方案1】：

带有title属性

文档：https://developer.snapappointments.com/bootstrap-select/examples/#placeholder

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>

<select class="selectpicker" title="Type" multiple>
  <option value="">Type 1</option>
  <option value="">Type 2</option>
  <option value="">Type 3</option>
  <option value="">Type 4</option>
</select>

【讨论】：