How do I make a placeholder for a 'select' multiple box using bootstrap-select?

Question

How do I have a placeholder on a select input with multiple options using bootstrap-select? The usual way of having the first option selected does not work as additional selected options are added to it.

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

There is a similar question but the solution does not work for a select multiple box.

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

Just tested... and with attribute `multiple` set I initially see all options. So what do you expect how the placeholder should look like when all options are visible initially? — Bernhard, Jan 25 '19 at 14:40
I don't want the placeholder/first option to be selected or selectable, it should not be displayed in the drop down — Tristanisginger, Jan 25 '19 at 14:41
When I run the snippet there is no option "Type" selected or not visible selected. I only see the four options (Type 1 - 4) — Bernhard, Jan 25 '19 at 14:43
ooops i forgot to mention I was using bootstrap-select, i've updated the question. Thanks — Tristanisginger, Jan 25 '19 at 14:47
You should edit your question and include a working snippet with the bootstrap-select cdn links so that people can see what you are really talking about. Most standard browser implementations of a ` — benvc, Jan 25 '19 at 14:48
@Tristanisginger Someone already edited your question to make your code a runnable snippet. This was probably confusing some people because it looked like a regular select dropdown. So I took the liberty of editing it to include the tags to make it run as a bootstrap-select component. I'm not sure if you are using Bootstrap 3 or 4.. I just went ahead and used the latest (Bootstrap 4.2). — Cave Johnson, Jan 25 '19 at 17:25

Tristanisginger · Accepted Answer · 2023-01-12T12:32:54.677

It's with the title attribute.

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

How do I make a placeholder for a 'select' multiple box using bootstrap-select?

1 Answers1