KeisukeYamazaki
9/17/2019 - 5:38 PM

[jQuery] Select2 の選択ボックスの文字列のスタイルをカスタマイズする

[jQuery] Select2 の選択ボックスの文字列のスタイルをカスタマイズする

select2.html
content_copyfile_download
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの書き方</title>
    
    <!-- select2を使うのに必要なものはここに貼る① -->
    <link th:href="@{/webjars/select2/4.0.10/css/select2.min.css}" rel="stylesheet">
    <script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/select2/4.0.10/js/select2.min.js}"></script>
    
  </head>
  <body>
    <h1>HTMLの書き方</h1>
    <p>はじめてのHTMLを作りました</p>
    
    <!-- 検索機能がついたドロップダウンリスト -->
    <select class='test'></select>
    
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- select2を使うのに必要なものはここに貼る② -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script>
        var inputData = [
            { id: 0, text: 'hoge' },
            { id: 1, text: 'fuga' },
            { id: 2, text: 'piyo' },
        ];
    
        $('.test').select2({
            data: inputData,
            width: 100,
        });
    </script>
  </body>
</html>
URL.txt
content_copyfile_download
https://puarts.com/?pid=1393