URLのパラメーターで、リンク先のフォームのSelectを選択した状態にしたい

Question

下記のようなURLのパラメーターを使って、リンク先のフォームの選択肢（Select）を選択した状態にしたいのですが、うまくいきません。

http://example.com/contact/?cc=sato

下記のサイトを参考にして、ソースを作成してみました。

JQuery URLのパラメータで、Formのselect要素を選択する
https://accelboon.com/tn/jquery-url%E3%81%AE%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%81%A7%E3%80%81form%E3%81%AEselect%E8%A6%81%E7%B4%A0%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%99%E3%82%8B/

該当のソースコード

<script type="text/javascript">
//パラメータを取得する
var params = getParameter();
$("#optional[0]").val('modalshift');
if(params['cc']!==""){
    $("#optional[0]").val(params['cc']);
}
 
function getParameter(){
    var paramsArray = [];
    var url = location.href; 
    parameters = url.split("#");
    if( parameters.length > 1 ) {
        url = parameters[0];
    }
    parameters = url.split("?");
    if( parameters.length > 1 ) {
        var params = parameters[1].split("&");
        for ( i = 0; i < params.length; i++ ) {
           var paramItem = params[i].split("=");
           paramsArray[paramItem[0]] = paramItem[1];
        }
    }
    return paramsArray;
};
</SCRIPT>

<form method="POST" action="f.do" accept-charset="UTF-8">
  <select name="optional[0]" id="optional[0]" class="h30 w100">
    <option value="mitei" >未定</option>
    <option value="nakamura" >中村</option>
    <option value="sato" >佐藤</option>
    <option value="suzuki" >鈴木</option>
  </select>
</form>

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

Chromeブラウザのコンソール上で、うまく機能していないよというエラーが出ています。

Uncaught TypeError: $ is not a function
    at ?cc=sato:1401

すみません、どなたか詳しい方、教えていただけましたら幸いです。

よろしくお願いいたします。m(_ _)m

Comments

[tabuu]

JQueryもインポートしていますか？

[yytop]

ありがとうございます。はい、jquery.js?ver=1.12.4を読み込んでいます。

[kei344]

例示用ドメインはご自身で所有されていない限り example.com, example.jp, example.co.jp など例示用に予約されたドメイン名を利用してください。 http://www.atmarkit.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html https://blog.jxck.io/entries/2017-09-27/example-local-test-domains.html https://blog.ko31.com/201304/sample-domain-example/

[yytop]

失礼しました。修正いたしました。

[x_x]

jQueryを読み込んでいる箇所のHTMLも提示してもらえるでしょうか？

[yytop]

x_xさんすみません、解決いたしました。ありがとうございます。

Answer 1

Uncaught TypeError: $ is not a function は $ を使ったjQuery構文より前の部分でjQueryを呼べていないときに発生します。
0. jQueryを読み込むSCRIPT要素が当該スクリプトより後に記述されている
0. パスに問題があり読み込まれていない

のどちらかだと思います。

Comments

[yytop]

ありがとうございます。
Jqueryは正しく読み込まれていて、その後に当該スクリプトが書かれていることを確認しました。

Answer 2

keiさんの指摘に加え、

以下を追加してみてください。

$(document).ready(function(){ // これ
	var params = getParameter();
	$("#optional\[0\]").val('modalshift');  // カッコをエスケープ
	if(params['cc']!==""){
		$("#optional\[0\]").val(params['cc']); // カッコをエスケープ
	}
}); // これ

Comments

[yytop]

ありがとうございます。
ご指摘いただいた箇所を追記しただけでは動かなかったのですが、もしや競合しているのではと思い、全体を(function($) {・・・・})(jQuery);で囲んだら、思い通り動作しました！
競合だけの問題ではなかったようなので、今回のアドバイス大変助かりました。感謝いたします。m(_ _)m