凡ミスでselect2のプレースホルダーが効かなくて詰まった話

スポンサーリンク

凡ミスでselect2のプレースホルダーが効かなくて詰まった話

 

HTMLのセレクトボックスの機能やデザインを簡単にグレードアップすることができるJavaScriptのプラグイン、Select2

このプラグインを使用する際にプレースホルダー周りが効かなくて困ったので備忘録です。

スポンサーリンク

プレースホルダーとは?

プレースホルダーとは?

 

プレースホルダー」とは、

プレースホルダー※画像です

上の画像のように、セレクトボックスが何も選択されていない場合に表示されるものです。(※画像の場合は「選択してください。」)

この、プレースホルダーは表示されるだけで選択することはできません

あくまで、ユーザーに分かりやすくするための機能です。

 

Select2とは?

Select2とは?

 

Select2とは、

冒頭で説明した通り、「セレクトボックス」を装飾することができるJavaScriptのプラグインです。

検索・タグ付き・フィルタ付き・画像付きなどのセレクトボックスが簡単に作成できます。

 

Select2でプレースホルダーが効かなかった原因

Select2でプレースホルダーが効かなかった原因

 

Select2でプレースホルダーを使用するには、

 

$(function() {
    $('').select2({
        placeholder: '選択してください。',
    });
});

上記のコードを記述します。

 

先頭に何もないoptionが必要

 

正常に動作しなかったコードは以下です。

 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <title>Select2</title>
</head>
<body>
    <select name="" id="select2_test">
        <option value="TEST A">TEST A</option>
        <option value="TEST B">TEST B</option>
        <option value="TEST C">TEST C</option>
        <option value="TEST D">TEST D</option>
    </select>
<script>
    $(function() {
        $('#select2_test').select2({
            width: '200px',
            placeholder: '選択してください。',
        });
    });
</script>
</body>
</html>

 

問題の部分は、

<select name="" id="select2_test">
    <option value="TEST A">TEST A</option>
    <option value="TEST B">TEST B</option>
    <option value="TEST C">TEST C</option>
    <option value="TEST D">TEST D</option>
</select>

ここです。

 

Select2でプレースホルダーを使用する際には、

先頭に何もないoptionが必要

です。

 

そのため、

<select name="" id="select2_test">
    <option value=""></option>
    <option value="TEST A">TEST A</option>
    <option value="TEST B">TEST B</option>
    <option value="TEST C">TEST C</option>
    <option value="TEST D">TEST D</option>
</select>

のように「<option value=””></option>」が必要です。

これで、正常に動作します。

 

Select2でプレースホルダーを利用するには、先頭に何もないoptionが必要!

optionのValueがないと選択肢が出ない

 

プレースホルダーが出ない以外に似たような現象で、

選択肢が出てこない

時があります。

 

<select name="" id="select2_test">
    <option value=""></option>
    <option value="">TEST A</option> // これだと出ない
    <option value="TEST B">TEST B</option>
    <option value="TEST C">TEST C</option>
    <option value="TEST D">TEST D</option>
</select>

上の場合は、「TEST A」にはValueが設定されていませんので、選択肢に出てきません。

他の「TEST B」などだけが表示されます。

 

「Value」が設定されていないと選択肢に出ない。

 

まとめ

 

Select2」でプレースホルダーが出ない時の対処方法でした。

凡ミスでしたが、情報が少なかったので困ってしまいました。

同じ現象が起こった場合は、参考にしてみてください。

コメント

タイトルとURLをコピーしました