bootstrap-selectでプルダウンリストの選択肢が消えたりはみ出したりした時の対応方法

# 事象 : プルダウンリストの選択肢が消える
![a.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/3e703c13-74b5-aca7-9226-9572411592b3.gif)

## 原因 : bootstrap-selectより後に`option`タグを作るから
htmlで`bootstrap-select.min.js`の後に`<option>`タグを作る`myBootstrapSelect.js`を読み込んでいるのが原因。

```html
<!DOCTYPE html>
<html>
<head>
    <title>bootstrap-selectで作るプルダウン</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="js/myBootstrapSelect.js"></script>
</head>
<body>
    <select id="targetSelect" size="1" class="selectpicker"></select>
</body>
</html>
```
```js:myBootstrapSelect.js
var selectOptionCount = 3;

$(window).on('load', function() {
    createSelectOption();
});

function createSelectOption() {
    var selectObj = $('#targetSelect');

    for (var i = 0; i < selectOptionCount; i++) {
        var option = $('<option>');
        option.html(i);
        selectObj.append(option);
    }
}
```

## 原因2 : Bootstrap4を使っているのにPopper.jsがないから
- 環境
    - CentOS Linux release 7.8.2003 (Core)
    - openjdk version "11.0.7" 2020-04-14 LTS
    - JSF 2.3.9
    - jquery 3.2.1
    - bootstrap 4.3.1
    - bootstrap-select 1.13.14

```xml
<!--省略-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<!--省略-->
  <ui:remove>セレクトボックス</ui:remove>
  <h:selectOneMenu id="select" styleClass="selectpicker" value="#{sampleBean.selected}">
    <f:selectItems value="#{sampleBean.selectItems}" />
  </h:selectOneMenu>
<!--省略-->
```

出力されたHTMLにはちゃんと選択肢があるのに・・・・

```html
<div class="dropdown bootstrap-select">
  <select id="formId:select" name="formId:select" class="selectpicker" size="1" tabindex="-98">    <option value="0">   </option>
    <option value="1">いぬ</option>
    <option value="2">ねこ</option>
    <option value="3">さる</option>
    <option value="4">ぽんすけ</option>
  </select>
  <button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="combobox" aria-owns="bs-select-1" aria-haspopup="listbox" aria-expanded="false" data-id="formId:select" title="Nothing selected"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Nothing selected</div></div> </div></button>
  <div class="dropdown-menu " style="max-height: 955px; overflow: hidden; min-height: 104px;">
    <div class="inner show" role="listbox" id="bs-select-1" tabindex="-1" aria-activedescendant="bs-select-1-0" style="max-height: 939px; overflow-y: auto; min-height: 88px;">
      <ul class="dropdown-menu inner show" role="presentation" style="margin-top: 0px; margin-bottom: 0px;">
        <li class="selected active"><a role="option" class="dropdown-item active selected" id="bs-select-1-0" tabindex="0" aria-setsize="5" aria-posinset="1" aria-selected="true"><span class="text">   </span></a></li>
        <li><a role="option" class="dropdown-item" id="bs-select-1-1" tabindex="0"><span class="text">いぬ</span></a></li>
        <li><a role="option" class="dropdown-item" id="bs-select-1-2" tabindex="0"><span class="text">ねこ</span></a></li>
        <li><a role="option" class="dropdown-item" id="bs-select-1-3" tabindex="0"><span class="text">さる</span></a></li>
        <li><a role="option" class="dropdown-item" id="bs-select-1-4" tabindex="0"><span class="text">ぽんすけ</span></a></li>
      </ul>
    </div>
  </div>
</div>
```

と思ったらドキュメントに「Bootstrap v4以降はPopper.jsが必要だよ」ってちゃんと書いてあった。

> If using bootstrap-select with Bootstrap v4+, you'll also need Popper.js.
> [Getting Started | bootstrap-select &middot; SnapAppointments Developer](https://developer.snapappointments.com/bootstrap-select/)

### 対応 : Popper.jsを読み込む

```xml
<!--省略-->
<!--↓↓追加↓↓-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!--省略-->
```

# 事象 : プルダウンリスト外に選択肢が出ている
![Screen Shot 2017-09-23 at 16.23.58.png](https://qiita-image-store.s3.amazonaws.com/0/159761/70aa4c20-9252-5fad-f98c-ef81ea345183.png)

## 原因 : `bootstrap.min.css`を読み込んでいないから

```html
<!DOCTYPE html>
<html>
<head>
    <title>bootstrap-selectで作るプルダウン</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/myBootstrapSelect.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
</head>
<body>
    <select id="targetSelect" size="1" class="selectpicker"></select>
</body>
</html>
```