php Chosenプラグインが適用出来ない

Question

Chosenプラグインを以下ページを参考に適用させたいのですが、画面上反映されません。
言語はｐｈｐでフレームワークはcakephp2です。

■Chosenプラグインページ
https://harvesthq.github.io/chosen/
→Standard　Select　を適用したいです

■適用実施参考ページ
https://dekfractal.com/2019/09/01/chosen%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AE%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9/

■行った事
①Chosenファイルダウンロード
②以下必要ファイルを設置
③読み込み部分の実装
④以下selectタグ部分かつJSの実装

■設置ファイル
・jquery-3.2.1.min.js
・chosen.jquery.min.js
・chosen.min.css

■実装箇所

<td><?php echo $this->Form->select('name', $list, array('class' => 'form-control  chosen-select')); ?></td>

<script>
$('.chosen-select').chosen();
</script>

※追記
デベロッパーツールのコンソールに以下エラーが出ております。

customers:429 Uncaught TypeError: $(...).chosen is not a function
    at customers:429
(anonymous) @ customers:429

Uncaught TypeError: $.cookie is not a function　app.js:18 
    at HTMLDocument.<anonymous> (app.js:18)
    at l (jquery.min.js:4)
    at Object.fireWith [as resolveWith] (jquery.min.js:4)
    at Function.ready (jquery.min.js:4)
    at HTMLDocument.S (jquery.min.js:4)

jquery-3.2.1.min.js:2 Uncaught TypeError: $(...).size is not a function
    at HTMLDocument.<anonymous> (customers:439)
    at j (jquery-3.2.1.min.js:2)
    at k (jquery-3.2.1.min.js:2)

jquery-3.2.1.min.js:2 Uncaught TypeError: $(...).size is not a function
    at HTMLDocument.<anonymous> (customers:468)
    at j (jquery-3.2.1.min.js:2)
    at k (jquery-3.2.1.min.js:2)

間違い等ございましたら、ご教示頂きたいです。
宜しくお願い致します。

Comments

[nojimage]

各css/javascriptファイルの読み込みにエラーは出ていませんか？
ブラウザのデベロッパーツールのコンソールにエラーは出ていませんか？

[ganbaruhito]

ご返信ありがとうございます。

ブラウザのデベロッパーツールのコンソールにエラーが出ておりました。
各css/javascriptファイルの読み込みが間違えているということでしょうか。

[nojimage]

JSの読み込み順の問題かもしれませんね。
jquery, chosen, scriptタグの順に記述されていますか？

[nojimage]

問題に直接は関係ないのですが、chosenは既に開発が止まっているみたいです。同様のライブラリにselect2というライブラリがありますので乗り換えを検討するのもよいかもしれません。 https://github.com/select2/select2

[ganbaruhito]

ご返信ありがとうございます。
乗り換えに関しては、検討致します。

タグの順番に関しては、以下を該当VIEWファイルに記述したのですが、、
<script>
$('.chosen-select').chosen();
</script>

[nojimage]

ブラウザで該当ページのソースを開いて確認してみてください。<script>タグは、jquery-3.2.1.min.jsの読み込み、chosen.jquery.min.jsの読み込み、<script> $('.chosen-select').chosen();</script> の順で記述されていますか？

[ganbaruhito]

ありがとうございます！
期待していたプルダウンが表示されました。

しかし、1点だけ問題があり、フォームの幅が元々より小さくなってしまいます。
元の幅にしようと以下のように実装しましたが、画面上元のプルダウンメニューに戻ってしまいます。
なぜでしょうか、、、。

$('.chosen-select').chosen({
width: "300px"
});

[nojimage]

https://harvesthq.github.io/chosen/options.html によると、widthは元のselect要素の幅からセットされるようなので、cssに

.chosen-select {
width: 300px;
}

と書くか、selectメソッドのオプションで 'style' => 'width: 300px' を指定してみてはどうでしょうか。