質問編集履歴
1
HTML、希望表示の画像を追加しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
[https://select2.org/](https://select2.org/)を利用してselect要素をカスタマイズしています。
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
デモなどを見ると、セレクト要素の下に検索ボックス、リスト一覧が表示されるようになっているのですが、
|
|
6
|
-
添付画像のようにセレクト要素部分が隠れてしまいます。
|
|
6
|
+
上記の添付画像のようにセレクト要素部分が隠れてしまいます。
|
|
7
|
+
本来は下記のようにセレクトボックス部分が表示されると思うのですが。
|
|
8
|
+
（下記の画像はcssで無理やり表示させています。）
|
|
7
9
|
|
|
10
|
+
|
|
11
|
+
|
|
8
12
|
Select2のバージョンは4を利用しています。
|
|
9
13
|
jQueryは3.4.1です。
|
|
10
14
|
WordPressで実行しています。
|
|
@@ -14,7 +18,15 @@
|
|
|
14
18
|
最終手段で無理やりJavaScriptでセレクト要素の高さ分だけ高さを追加しようかと考えているのですが、
|
|
15
19
|
デモなどでは通常通り動いているので、わざわざコードを追加するのもなと思っております。
|
|
16
20
|
|
|
21
|
+
```html
|
|
22
|
+
<select id="list" name="list" class="js-select2" data-placeholder="リストを選択">
|
|
23
|
+
<option></option>
|
|
24
|
+
<option value="リスト1">リスト</option>
|
|
25
|
+
<option value="リスト2">リスト</option>
|
|
26
|
+
<option value="リスト3">リスト</option>
|
|
27
|
+
</select>
|
|
28
|
+
```
|
|
17
|
-
```
|
|
29
|
+
```javascript
|
|
18
30
|
$(window).on('load', function() {
|
|
19
31
|
$('.js-select2').select2();
|
|
20
32
|
});
|