プルダウンでページ遷移しパロメータによってプルダウンの初期値（selected）を変える

Question

前提・実現したいこと

FutureShopを使用してショップを作成しております。
htmlとcssしかわからないど素人ですが自分で調べてもうまくいかないので知識のある方に助けてほしいです。

FutureShopの商品一覧ページに商品の並び順を変える機能がデフォルトで付いているのですがリストタグで横並びに並んだようなデザインになっています。
スマホでの操作性を考えると横並びではなくプルダウンにしたいと思い、下記2パターンの方法を試しましたがうまくいきません。

①既存の機能をcssでプルダウンぽく見た目を変える
②既存のパーツは使わずにプルダウンの並び順を変える機能をいちから実装する

①に関しては、デザインだけを変えることは可能だと思いますが既存の機能を使用する場合
もともとのソースを変更することが仕様上できないので外部ファイルから無理やり変更をかける方法しかありませんのであまりスマートではないと思い②で検討しています。

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

商品の絞り込みが仕様上、urlにパラメータを追加するだけで可能なので
selectタグでプルダウンを作り、遷移先を「url+パロメータ」という形で作りました。
プルダウンを選択するとソート後のページに遷移させることはできるのですが
遷移後のページのプルダウンを連動させることが出来ません。

該当のソースコード

		<select name="select-sort" onChange="location.href=value;">
        	<option value="{% category.url %}?sort=price_low">価格が安い順</option>
        	<option value="{% category.url %}?sort=price_high">価格が高い順</option>
			<option value="{% category.url %}">人気順</option>
        	<option value="{% category.url %}?sort=latest">新着順</option>
		</select>

{% category.url %}はFutureShopの独自タグでURLが自動挿入されます。
（デフォルトが人気順のため、人気順のパロメータは存在しません）

試したこと

遷移先のパロメータを取得し、一致するoptionにselectedを付与したいと思い
調べたところ、PHPかjavascriptを使用すれば近しいことはできそうなのですが
「パロメータを取得する」
「一致したoptionにselectedを付与する」
をばらばらで解決した情報しか見つかりませんでした。

それらの必要だろうところを自分なりにつなぎ合わせたりしましたが
知識が不足しておりまったくうまくいきません。

	<div class="itemgroup_sort">
		<span class="itemgroup_sort-label">並び順</span>
		<select name="itemsort-select" onChange="location.href=value;">
        	<option value="{% category.url %}?sort=price_low">価格が安い順</option>
        	<option value="{% category.url %}?sort=price_high">価格が高い順</option>
			<option value="{% category.url %}">人気順</option>
        	<option value="{% category.url %}?sort=latest">新着順</option>
		</select>
	  </div>
	  <script>
		  var params = getParameter();
$("#itemsort-select").val('modalshift');
if(params['sort']!==""){
    $("#itemsort-select").val(params['sort']);
}
 
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("&amp;");
		for ( i = 0; i < params.length; i++ ) {
		   var paramItem = params[i].split("=");
		   paramsArray[paramItem[0]] = paramItem[1];
		}
	}
	return paramsArray;
};
	  </script>

htmlにすべて記述する方法とjQueryを別ファイルにして読み込む方法を試しましたが
どちらでもうまくいきませんでした。
恐らく初歩の初歩でつまずいていると思うのですが、解決法をご教示いただけますと有難いです。
宜しくお願い致します。

▼▼▼追記▼▼▼

<div class="itemgroup_sort">
<span class="itemgroup_sort-label">並び順</span>
<select name="itemsort-select" onChange="location.href=value;" id="itemsort-select">
<option value="{% category.url %}?sort=price_low">価格が安い順</option>
<option value="{% category.url %}?sort=price_high">価格が高い順</option>
<option value="{% category.url %}">人気順</option>
<option value="{% category.url %}?sort=latest">新着順</option>
</select>
</div>
<script>
var params = getParameter();
$("#itemsort-select").val('modalshift');
if(params['sort']!==""){
$("#itemsort-select").val("{% category.url %}?sort=" + params['sort']);
}

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("&amp;");
for ( i = 0; i < params.length; i++ ) {
var paramItem = params[i].split("=");
paramsArray[paramItem[0]] = paramItem[1];
}
}
return paramsArray;
};
</script>

頂いた回答をもとに上記のように修正したところ、遷移先に合わせてプルダウンを変化させることができました！
ですが、「人気順」を選択したときだけプルダウンの表示が消えてしまうバグが発生しており
エラーメッセージが下記のように出ています。
Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

人気順にパロメータが無いことが原因かと思うのですが
あっているのかあまり自信がありません。

▼▼▼追記2▼▼▼
「人気順」のパロメータが存在したので追加しました。人気順を選択したときはきちんと表示されるようになりましたが
通常のショップ入り口からアクセスしてくるURLが{% category.url %}なので
何の解決にもなりませんでした。

ifの条件を増やせばいいのかなと思って書いてみましたが何も変化がないです。
解決から遠ざかった感じがします。

<div class="itemgroup_sort">	
		<select name="itemsort-select" onChange="location.href=value;" id="itemsort-select">
        	<option value="{% category.url %}?sort=price_low">価格が安い順</option>
        	<option value="{% category.url %}?sort=price_high">価格が高い順</option>
			<option value="{% category.url %}?sort=priority">人気順</option>
        	<option value="{% category.url %}?sort=latest">新着順</option>
		</select>
	  </div>
<script>
		  var params = getParameter();
$("#itemsort-select").val('modalshift');
if(params['sort']!==""){
    $("#itemsort-select").val("{% category.url %}?sort=" + params['sort']);
}
else if(params['sort']!==""){
    $("#itemsort-select").val("{% category.url %}");
}
 
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("&amp;");
		for ( i = 0; i < params.length; i++ ) {
		   var paramItem = params[i].split("=");
		   paramsArray[paramItem[0]] = paramItem[1];
		}
	}
	return paramsArray;
};
</script>

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

ツールはDreamweaverを使用してコードをかいていますが
FutureShopに反映させるのは基本的にコピペです。
コマースクリエイターには登録しているのでサーバーにファイルを追加するのは可能です。

Answer 1

結局何がどうなのかわかりませんが、パロメータの存在しない人気順を一番上にすることでそれっぽくなりました。
else ifがパロメータが無い場合、として書けているのか全く分かりませんが
とりあえず残しておきます。

<div class="itemgroup_sort">	
		<select name="itemsort-select" onChange="location.href=value;" id="itemsort-select">
			<option value="{% category.url %}">人気順</option>
        	<option value="{% category.url %}?sort=price_low">価格が安い順</option>
        	<option value="{% category.url %}?sort=price_high">価格が高い順</option>
        	<option value="{% category.url %}?sort=latest">新着順</option>
		</select>
	  </div>
<script>
		  var params = getParameter();
$("#itemsort-select").val('modalshift');
if(params['sort']!==""){
    $("#itemsort-select").val("{% category.url %}?sort=" + params['sort']);
}
else if(params['sort']!==""){
    $("#itemsort-select").val("{% category.url %}");
}
 
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("&amp;");
		for ( i = 0; i < params.length; i++ ) {
		   var paramItem = params[i].split("=");
		   paramsArray[paramItem[0]] = paramItem[1];
		}
	}
	else if( parameters.length() == 0 ) {
		var params = parameters[1].split("&amp;");
		for ( i = 0; i < params.length; i++ ) {
		   var paramItem = params[i].split("=");
		   paramsArray[paramItem[0]] = paramItem[1];
		}
	}
	return paramsArray;
};
</script>

▼▼追記▼▼

<div class="itemgroup_sort">	
		<select name="itemsort-select" onChange="location.href=value;" id="itemsort-select">
        	<option value="{% category.url %}?sort=latest">新着順</option>
			<option value="{% category.url %}?sort=priority">人気順</option>
        	<option value="{% category.url %}?sort=price_low">価格が安い順</option>
        	<option value="{% category.url %}?sort=price_high">価格が高い順</option>
		</select>
	  </div>
<script>
var params = getParameter();
if (typeof params["sort"] === "string") {
$("#itemsort-select").val("{% category.url %}?sort=" + params["sort"]);
}
 
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("&amp;");
		for ( i = 0; i < params.length; i++ ) {
		   var paramItem = params[i].split("=");
		   paramsArray[paramItem[0]] = paramItem[1];
		}
	}
	return paramsArray;
};
</script>

アドバイス頂いて、修正し、こちらでエラーが出ずに思った動きをするようになったので解決しました！

Comments

[zushi0905]

ちなみにはじめに一覧ページに入ってきた時(パロメータがない時)の並び順は人気順ですか？

パロメータが無い場合は下です。この場合だと人気順がどこにあっても大丈夫です。人気順を一番上にしてそれっぽくなってるのは、selectのvalueが指定されてない時は一番最初のoptionが設定されるからです。
```
$("#itemsort-select").val('modalshift'); // ここいらない気がする
if(params['sort']!==""){
$("#itemsort-select").val("{% category.url %}?sort=" + params['sort']);
}
else{
$("#itemsort-select").val("{% category.url %}");
}
```

[kanakana77]

＞ちなみにはじめに一覧ページに入ってきた時(パロメータがない時)の並び順は人気順ですか？
基本的にはそうです！

頂いたアドバイスをもとに修正してみました。
else ifをelseにすると何を選んでも一番最初のoptionが表示されてしまったので
やはりelse ifとしています。
人気順を一番上以外の位置にすると人気順を選んだ時は一番最初のoptionが表示されてしまうので
やはり人気順を一番上に変更しました。
なにか別の問題が起こっている感じもします。。。
いらない気がするとおっしゃってた行は削除しても動作が変わらなかったので消しました。
```
<div class="itemgroup_sort">
<select name="itemsort-select" onChange="location.href=value;" id="itemsort-select">
<option value="{% category.url %}">人気順</option>
<option value="{% category.url %}?sort=price_low">価格が安い順</option>
<option value="{% category.url %}?sort=price_high">価格が高い順</option>
<option value="{% category.url %}?sort=latest">新着順</option>
</select>
</div>
<script>
var params = getParameter();
if(params['sort']!==""){
$("#itemsort-select").val("{% category.url %}?sort=" + params['sort']);
}
else if(params['sort']!==""){
$("#itemsort-select").val("{% category.url %}");
}

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("&amp;");
for ( i = 0; i < params.length; i++ ) {
var paramItem = params[i].split("=");
paramsArray[paramItem[0]] = paramItem[1];
}
}
else if( parameters.length() == 0 ) {
var params = parameters[1].split("&amp;");
for ( i = 0; i < params.length; i++ ) {
var paramItem = params[i].split("=");
paramsArray[paramItem[0]] = paramItem[1];
}
}
return paramsArray;
};
</script>
```

[zushi0905]

条件のparams['sort']!==""が違いますね。
一般的にはパラメータが見つからなかった時はundefinedが帰ってきます。null,undefined,空文字の違いを理解する必要があります。

しかし、今回は少し特殊なパターンを踏んでしまったようです。paramsは配列ですが、jsの配列にはメソッドとしてsortが存在しています。なので初期値ではsortには関数がセットされていて、それを上書きする形でパロメータの文字列をセットしてしまっています。正直getParameterで値を配列で全て持ってきたのはよくなかったですね。連想配列か単体を返すgetParameterを用意するべきだとは思います。

しょうがないので、条件式を関数か文字列かで判定しましょう。
```
var params = getParameter();
if (typeof params["sort"] === "string") {
$("#itemsort-select").val("{% category.url %}?sort=" + params["sort"]);
} else {
$("#itemsort-select").val("{% category.url %}");
}
```

[kanakana77]

何度もご丁寧にありがとうございます。
コード修正しましたがやはりパラメータの存在しない人気順を選択するとoptionの初期値が表示されてしまいました。
人気順に関しては昨日調べてわかったようにパラメータが存在したのでそれを付けました。
アクセスしてきたときのパラメータが無い状態に関してはやはりoptionの初期値が表示されるので
人気順を一番上に設定します！

```
<div class="itemgroup_sort">
<select name="itemsort-select" onChange="location.href=value;" id="itemsort-select">
<option value="{% category.url %}?sort=priority">人気順</option>
<option value="{% category.url %}?sort=latest">新着順</option>
<option value="{% category.url %}?sort=price_low">価格が安い順</option>
<option value="{% category.url %}?sort=price_high">価格が高い順</option>
</select>
</div>
<script>
var params = getParameter();
if (typeof params["sort"] === "string") {
$("#itemsort-select").val("{% category.url %}?sort=" + params["sort"]);
} else {
$("#itemsort-select").val("{% category.url %}");
}

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("&amp;");
for ( i = 0; i < params.length; i++ ) {
var paramItem = params[i].split("=");
paramsArray[paramItem[0]] = paramItem[1];
}
}
else if( parameters.length() == 0 ) {
var params = parameters[1].split("&amp;");
for ( i = 0; i < params.length; i++ ) {
var paramItem = params[i].split("=");
paramsArray[paramItem[0]] = paramItem[1];
}
}
return paramsArray;
};
</script>
```

[zushi0905]

もしかしてエラー全く読んでないですよね？開発者ツールのconsoleくらいは見て欲しいです。
getParameterのなかのelse if( parameters.length() == 0 )が間違えてるんで、sortパラメータがない時はコード自体がエラってます。なので結果的にselectにvalueが入らないので一番上が表示されてるだけです。

人気順は2番目がいいとかないならこれでいいかと思います。コード的にはエラってますけど、人気順もパラメータ付きにするならelse文いらなくなるだけで動きは同じですし

[kanakana77]

エラーの表示が出てるのはわかるのですがそれを直す方法が全く分かりませんでした。
昨日まではパラメータないときは一番上がすら表示されなかったので表示されるようになって安心しました！
間違えてると指摘いただいたところ、少しずつ消してみましたがちゃんと動きそうです！
パラメータがない状態でもエラーは出なくなったのでこちらで完了します！
（回答の方に書いておきます）
ほんとうにありがとうございました！
javascriptっていうものを初めて触ったのですごく勉強になりました。

Answer 2

まず#itemsort-selectのセレクタが存在しないから、select[name="itemsort-select"]かhtmlの方にidをつける。

あと初期値を入れる時に $("#itemsort-select").val(params['sort']);だとsortのvalueしか入らないです。しかし今回のセレクトボックスのoptionはURL付なので下のようにURLを入れてあげてください。

$("#itemsort-select").val("{% category.url %}?sort=" + params['sort']);

futureの動作環境がないので動作は確認してませんので、正常に動くかは分かりません。

Comments

[kanakana77]

ありがとうございます！
いただいたアドバイスを参考に下記のように修正したところ、パロメータに応じた値を選択した状態にすることができました！
ですが、パロメータのつかない「人気順」を選択したときにプルダウンの表示が空っぽになってしまいます。
エラーを確認すると「Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.」となっているようです。
恐らくパロメータがないということだと思うのですが
こちらの解消方法などありますでしょうか・・・。
質問ばかりになってしまい申し訳ありません。

[kanakana77]

修正した内容
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<div class="itemgroup_sort">
<span class="itemgroup_sort-label">並び順</span>
<select name="itemsort-select" onChange="location.href=value;" id="itemsort-select">
<option value="{% category.url %}?sort=price_low">価格が安い順</option>
<option value="{% category.url %}?sort=price_high">価格が高い順</option>
<option value="{% category.url %}">人気順</option>
<option value="{% category.url %}?sort=latest">新着順</option>
</select>
</div>
<script>
var params = getParameter();
$("#itemsort-select").val('modalshift');
if(params['sort']!==""){
$("#itemsort-select").val("{% category.url %}?sort=" + params['sort']);
}

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("&amp;");
for ( i = 0; i < params.length; i++ ) {
var paramItem = params[i].split("=");
paramsArray[paramItem[0]] = paramItem[1];
}
}
return paramsArray;
};
</script>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

[zushi0905]

それが起こることはわかってましたが、そんなに難しくないので自力で解決して欲しいですね。
人気中にはsortのパラメータが付いてない時です。
sortのパラメータがない時に人気順のvalueである("{% category.url %}")をセットしてあげればいいです。

[kanakana77]

想定済の事態だったんですね！
ここまで来るまで1週間かかりましたがそんなに難しくないとのことなのでもう少し調べてみます。
今の段階では全くわかりません。
ありがとうございました！

[zushi0905]

ここまでjsかけてればいけると思います！頑張ってください！