jQueryが効きません

前提・実現したいこと

jQueryの「select2」を使って、セレクト項目を検査できるセレクトボックスを作りたいです。とても困っています。。

↓このサイトから「select2」の素材をダウンロードして使いました。
https://select2.org/

発生している問題・エラーメッセージ

jQueryがちゃんと組み込まれているにもかかわらず何も変わらない。

また、フォルダの階層はこうなっています。これでよいと思うのですが。。

該当のソースコード

<!doctype html>
  <html>
    <head>
       <title>模写１</title>
       <meta charset="utf-8">
       <link rel="stylesheet" href="style7.scss">
        
        
    </head>
      
      
<body>
      <select class="place">
          <option>東京</option>
          <option>神奈川</option>
          <option>栃木</option>
          <option>福岡</option>
    </select>
    
      <script src="select2.js"></script>
        <link rel="stylesheet" href="select2.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>

試したこと

    <link rel="stylesheet" href="select2.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

の記述を<head>内に持ってきても、</body>の直前に持ってきてもだめだった。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2020/05/01 12:59

（質問文は編集できます）プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

chifflot

2020/05/01 13:05

申し訳ありません、今追記いたしました。

行動規範の内容に同意します

回答3件

ベストアンサー

jQueryライブラリを読むのがさき

投稿2020/05/01 13:26

yambejp

総合スコア116724

yambejp

2020/05/01 13:27 編集

chifflot

2020/05/01 14:06 編集

jQueryライブラリを先にするのも実は試してみはいたのですが、改めてjQueryライブラリを先に読み込んで、↓この記述 <script> $(function () { $('.place').select2(); }); </script> を足したらうまくいきました！本当にありがとうございます！この記述は必要不可欠なのでしょうか？ちなみに、僕のコードは <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="select2.js"></script> <link rel="stylesheet" href="select2.css"> となっているのに対し、yambejpさんのは <link rel="stylesheet" href="ttps://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"> <script type="text/javascript" src="ttps://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript" src="ttps://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> という風にコードが長いです。このコードは、どこから読み込んだものなのでしょうか？教えていただけると幸いです。

行動規範の内容に同意します

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="select2.js"></script>
<link rel="stylesheet" href="select2.css">

jQueryは他のスクリプトより先に読み込んでください

投稿2020/05/01 13:23

akkman

総合スコア254

chifflot

2020/05/01 14:05

ありがとうございます！

行動規範の内容に同意します

   　<head>
       <title>模写１</title>
       <meta charset="utf-8">
       <link rel="stylesheet" href="style7.scss"><!-- ここscssってなってますよ？cssでは? -->


    </head>

投稿2020/05/01 13:41