フォームの戻るボタンをクリック後、選択肢とjavascript制御が解除される

Question

お世話になります。

弊社本店サイトにて、お客様自身でカスタムできるページがあり、
お客様に選択に迷わないよう、javascriptを使い選択肢を制御しています。

▼該当ページ
https://www.4860.jp/original-order/kubota/kub-ord-kg/kub-ord-kg

入力・選択する上では、javascriptの動作に問題がないのですが、
入力の確認画面へ行き、前のページに戻るボタンを押し、前のページに戻った際、
javascriptで制御している箇所が解除されています。


▼問題の箇所①
「2 レザー（本体）カラーを選択して下さい」の項目で「2色以上」を選択します。
↓
「2色以上をご希望の方」の内容が表示され、プルダウンメニューが選択できるようになります。
プルダウンを選択
↓
ページ下部の「オーダー内容の確認」をクリックし、エラー画面に遷移します。
「前のページに戻る」をクリックすると、ラジオボタンの「2色以上」は保持されますが、
「2色以上をご希望の方」の内容が消え、2色以上をご希望の方のプルダウンメニューの内容も解除されています。


▼問題の箇所②

「14 指カバー・指あての有無を選択して下さい」の項目で「指カバーA」のプルダウンメニューを選択し、
他の「指カバーB、指あて」が選択ができないようになります
↓
ページ下部の「オーダー内容の確認」をクリックし、エラー画面に遷移します。
「前のページに戻る」をクリックすると、プルダウンメニューの選択肢は残りますが、
「指カバーB、指あて」が選択ができてしまいます。


javascriptの制御を保持した状態で、ページに戻る設定がありましたら、
ご教示のほどよろしくお願いします。


▼該当ページのjavascriptの記述

					//基本モデル切替
					$(function() {
						$(".tab li").click(function() {
							var num = $(".tab li").index(this);
							$(".tabContent").removeClass('active');
							$(".tabContent").eq(num).addClass('active');
							$(".tab li").removeClass('active');
							$(this).addClass('active')
						});
					});
					//2色以上選択した時
					function checkradio( disp ) {
					
						var kawaColor = document.getElementsByName("レザー（本体）カラー*3");
						var kawa1 = document.getElementById("LC2List1");
						var kawa2 = document.getElementById("LC2List2");
						var kawa3 = document.getElementById("LC2List3");
						
						document.getElementById('colors').style.display = disp;
						
						if(kawaColor.value=="2色以上"){
						
						} else {
							//2色以上以外を選択した場合、プルダウンメニューをリセット
							kawa1.selectedIndex = 0;
							kawa2.selectedIndex = 0;
							kawa3.selectedIndex = 0;
						
						}
					}
					
					
					function bmatch(txt,chk) {
						if (txt.indexOf(chk) != -1) { return true; } else { return false; }
					}
					// 基本モデルを変更した場合のスクリプト
					function changeModel(parts) {

					// 選んだ基本モデルのタイプを調べる
					var pitcher=false, infielder=false, outfielder=false, allposi=false;
					model=parts.options[parts.selectedIndex].value;
					if (model.match(/ピッチャー/i)) {pitcher=true;}	//投手用
					if (model.match(/外野/i)) {outfielder=true;}		//外野手用
					if (model.match(/オールポジション/i) || model.match(/オールラウンド/i)) {allposi=true;}	//オールポジション
					if (model.match(/内野/i) || model.match(/セカンド/i) || model.match(/ショート/i) || model.match(/サード/i)) {infielder=true;}	//内野手用


					// ウェブの選択可・不可変更処理(一番最初は飛ばす)
					var webList = document.getElementsByName('ウェブスタイル*4');
					for (var i = 1; i < webList.length; i++) {
						switch (true) {
							case pitcher && bmatch(webList[i].value,'ピッチャー'):break;
							case infielder && bmatch(webList[i].value,'内野'):break;
							case outfielder && bmatch(webList[i].value,'外野'):break;
							case allposi && bmatch(webList[i].value,'オールポジション'):break;
							default:webList[i].disabled=true; webList[i].selectedIndex=false; continue; break;
							}
						webList[i].disabled=false;
						}

						// バックスタイルの選択可・不可変更処理
						var bsList = document.getElementsByName('バックスタイル*5');
						if ( model.match(/FM1型/i) || model.match(/FM5型/i)|| model.match(/FM7型/i)|| model.match(/FM8型/i)) {
						bsList[0].disabled=true; bsList[1].disabled=false;
						} else {
						bsList[1].disabled=true;
						bsList[0].disabled=false;
						}

						// 芯トジの選択可・不可変更処理
						var stList = document.getElementsByName('芯トジ形態*6');
									stList[0].disabled=true; stList[2].disabled=true;		//タテトジと辻トジを一度選択不可にする
									if (allposi || pitcher || outfielder) {stList[0].disabled=false;} else {stList[0].checked=false}	//タテトジ
									if (allposi || infielder) {stList[2].disabled=false;} else {stList[2].checked=false}		//辻トジ
					}
							// ウェブレースカラー選択
							function changeWeb(parts) {
								var elem = document.getElementsByName('ウェブレースカラー・オプション')[0];
								if (bmatch(parts.value,'W-23') || bmatch(parts.value,'W-26')) {
									elem.disabled = false;
								} else {
									elem.disabled = true; elem.selectedIndex = 0;
								}
					}
		###HR######IMG0e59acc819063d5495ab502911de9d72c.jpegIMG0### ###IMG1e661c200e0d77a783e8e0f66473faabe.jpegIMG1###

Answer

ECマスターズの村井です。

休み明け担当よりご返答しますので、今しばらくお待ちください。

Answer

ECマスターズの田中です。

確認が遅れてしまい、
数日経過しての返信となってしまいましたことを
深くお詫び申し上げます。

制御を保持した状態で戻る、という処理はどうしても難しくなってしまいますので、
まずは、戻るで戻ってきた際に、自動で再読み込みを行うscriptタグをご紹介します。
ページ内の任意の場所（の直前など）にご記載ください。


window.addEventListener("pageshow", function(){
if( performance.getEntriesByType("navigation").map(function(p){ return p.type; }).join() === "back_forward" ){
	window.location.reload();
}
});


「window.location.reload();」にてリロードの処理を行うのですが、
リロードの代わりに、ページ読込直後の処理やcheckradio関数などを実行させることで
現在入っている値に基づいて見た目を再度構築することができます。

また、フォームの値が選択される度に、選択された値を
https://qiita.com/uralogical/items/ade858ccfa164d164a3b
上記sessionStorageに保存しておき、
リロードの代わりにsessionStorageから値を読み込む処理を加える、
という仕組みも作成することができます。

必要に応じて処理内容を修正の上、ご活用いただきますようお願いいたします。

Answer

ECマスターズ 田中様。
お世話になります。

> 「window.location.reload();」にてリロードの処理を行うのですが、
>  リロードの代わりに、ページ読込直後の処理やcheckradio関数などを実行させることで
>  現在入っている値に基づいて見た目を再度構築することができます。

上記ですが、現状の記述を頂いたスクリプトの中に入れるであっていますか。

> また、フォームの値が選択される度に、選択された値を
> https://qiita.com/uralogical/items/ade858ccfa164d164a3b
> 上記sessionStorageに保存しておき、
> リロードの代わりにsessionStorageから値を読み込む処理を加える、
> という仕組みも作成することができます。

こちらの書き方はどのように記述すればいいでしょうか。
また、選択肢のid、name値、value値のいずれかで制御は可能でしょうか。

ご確認のほどよろしくお願い致します。

Answer

ECマスターズの田中です。


> こちらの書き方はどのように記述すればいいでしょうか。

方法を探ったところ、
フォーム全体で値を一括で保存/読込する書き方ができましたので、
ご案内いたします。

下記scriptタグをご利用ください。
「// 見た目を再調整する仕組みを導入」の位置で、
フォームの中に値が全て入っている状態となりますので、
そこに現状の記述を入れていただく形になります。

= この下の行から ====================

$(function(){

var f = 'form[action*="order-s.cgi"]'; //対象のフォームを特定
var ssk = "gloveorder"; //sessionStorage内の名前

// 「戻る」時に、値をフォームに読込
window.addEventListener("pageshow", function(){
	if( performance.getEntriesByType("navigation").map(function(p){ return p.type; }).join() === "back_forward" ){
		JSON.parse( sessionStorage.getItem(ssk) ).forEach(function(nv){
			document.querySelector(f)[nv.name].value = nv.value;
		});

		// 見た目を再調整する仕組みを導入
	}
});


// フォーム変更ごとに、値をsessionStorageに保存
$(f).change(function(){
	sessionStorage.setItem(ssk, JSON.stringify( $(this).serializeArray() );
});

});

= この上の行まで ====================


> 選択肢のid、name値、value値のいずれかで制御は可能でしょうか。

どのような制御をご希望かによって変わってくるのですが、
フォームのデータは、nameに対してvalueを設定する形式になっておりますので、
nameを基準にvalueを取得・設定することは可能です。

Answer

ECマスターズ 田中様。
お世話になります。

記述方法をありがとうございます。
早速、試してみたのですが、javascriptが動かなくなりました。
https://www.4860.jp/original-order/kubota/kub-ord-ng/test-kub-ord-ng

選択肢を選択するとデベロッパーツールでエラーが増え続ける動きをしています。

どの箇所を修正すればよろしいでしょうか。
ご教示のほど、よろしくお願い致します。

Answer

ECマスターズの田中です。

ご不便をおかけして申し訳ありません。

お手数ですが、ご変更いただいた内容を、
先にご案内差し上げた下記記述に差し替えて、
「戻る」時に再読み込みを行う動作にご変更いただきますようお願いします。


window.addEventListener("pageshow", function(){
if( performance.getEntriesByType("navigation").map(function(p){ return p.type; }).join() === "back_forward" ){
window.location.reload();
}
});

Answer

ECマスターズ 田中様。
お世話になります。

返事が遅くなり、申し訳ございません。
ページを修正致しましたが、変わっていないように感じます。
https://www.4860.jp/original-order/kubota/kub-ord-ng/test-kub-ord-ng

「// 見た目を再調整する仕組みを導入」を入れた内容が、
デベロッパーツールでエラーを起こしています。

記述方法が変わりますでしょうか。
すみませんが、確認のほどお願い致します。###HR######IMG0aac53cc04e99bf1ab9ff2b85d613cfcf.jpegIMG0###

Answer

ECマスターズの田中です。

ご不便をおかけしており、申し訳ありません。
まずは、エラーをなくすために、
該当タグの内容を、下記内容にまるごと差し替えていただきますようお願いします。


	$(function(){
	
		var f ='form[action*="order-s.cgi"]'; //対象のフォームを特定
		var ssk = "gloveorder"; //sessionStorage内の名前
		
		
		// 「戻る」時に、ページを再読み込み
		window.addEventListener("pageshow", function(){
		if( performance.getEntriesByType("navigation").map(function(p){ return p.type; }).join() === "back_forward" ){
		window.location.reload();
		}
		});
		

		//基本モデル切替
			$(function() {
				$(".tab li").click(function() {
					var num = $(".tab li").index(this);
					$(".tabContent").removeClass('active');
					$(".tabContent").eq(num).addClass('active');
					$(".tab li").removeClass('active');
					$(this).addClass('active')
				})
			});
			
			
			//2色以上選択した時
			function checkradio( disp ) {
			
				var kawaColor = document.getElementsByName("本体カラー*3");
				var kawa1 = document.getElementById("LC2List1");
				var kawa2 = document.getElementById("LC2List2");
				var kawa3 = document.getElementById("LC2List3");
				document.getElementById('colors').style.display = disp;
				
					if(kawaColor.value=="2色以上"){
					
					} else {
					//2色以上以外を選択した場合、プルダウンメニューをリセット
					kawa1.selectedIndex = 0;
					kawa2.selectedIndex = 0;
					kawa3.selectedIndex = 0;
					
					}
				
			}
			
			function bmatch(txt,chk) {
				if (txt.indexOf(chk) != -1) { return true; } else { return false; }
			}
			// 基本モデルを変更した場合のスクリプト
			function changeModel(parts) {
						// 選んだ基本モデルのタイプを調べる
						var pitcher=false, infielder=false, outfielder=false, allposi=false;
						model=parts.options[parts.selectedIndex].value;
						if (model.match(/ピッチャー/i)) {pitcher=true;}	//投手用
						if (model.match(/外野/i)) {outfielder=true;}		//外野手用
						if (model.match(/オールポジション/i) || model.match(/オールラウンド/i)) {allposi=true;}	//オールポジション
						if (model.match(/内野/i) || model.match(/セカンド/i) || model.match(/ショート/i) || model.match(/サード/i)) {infielder=true;}	//内野手用

						// ウェブの選択可・不可変更処理(一番最初は飛ばす)
						var webList = document.getElementsByName('ウェブスタイル*4');
						for (var i = 1; i < webList.length; i++) {
							switch (true) {
								case pitcher && bmatch(webList[i].value,'ピッチャー'):break;
								case infielder && bmatch(webList[i].value,'内野'):break;
								case outfielder && bmatch(webList[i].value,'外野'):break;
								case allposi && bmatch(webList[i].value,'オールポジション'):break;
								default:webList[i].disabled=true; webList[i].selectedIndex=false; continue; break;
								}
							webList[i].disabled=false;
							}

						// バックスタイルの選択可・不可変更処理
						var bsList = document.getElementsByName('バックスタイル*5');
						if ( model.match(/FM1型/i) || model.match(/FM5型/i)|| model.match(/FM7型/i)|| model.match(/FM8型/i)) {
						bsList[0].disabled=true; bsList[1].disabled=false;
						} else {
						bsList[1].disabled=true;
						bsList[0].disabled=false;
						}

						// 芯トジの選択可・不可変更処理
						var stList = document.getElementsByName('芯トジ形態*6');
									stList[0].disabled=true; stList[2].disabled=true;		//タテトジと辻トジを一度選択不可にする
									if (allposi || pitcher || outfielder) {stList[0].disabled=false;} else {stList[0].checked=false}	//タテトジ
									if (allposi || infielder) {stList[2].disabled=false;} else {stList[2].checked=false}		//辻トジ
								}

						// ウェブレースカラー選択
						function changeWeb(parts) {
							var elem = document.getElementsByName('ウェブレースカラー・オプション')[0];
							if (bmatch(parts.value,'W-23') || bmatch(parts.value,'W-26')) {
								elem.disabled = false;
							} else {
								elem.disabled = true; elem.selectedIndex = 0;
							}
			}
			
			
			
			
				//ブックマーク
				function addBookmark(title,url) {
						if (window.sidebar) {
								window.sidebar.addPanel(title, url,"");
						} else if( document.all ) {
								window.external.AddFavorite( url, title);
						} else if( window.opera && window.print ) {
								return true;
						}
				}
				
				let selectCover = document.getElementById('指カバーAカラー');
				let selectCover2 = document.getElementById('指カバーBカラー');
				let selectCover3 = document.getElementById('指あてカラー');

				selectCover.addEventListener('change', () => {
					if(selectCover.value != '無し'){
						selectCover2.disabled = true;
						selectCover3.disabled = true;
					}else{
						selectCover2.disabled = false;
						selectCover3.disabled = false;
					}
				})
				selectCover2.addEventListener('change', () => {
					if(selectCover2.value != '無し'){
						selectCover.disabled = true;
						selectCover3.disabled = true;
					}else{
						selectCover.disabled = false;
						selectCover3.disabled = false;
					}
				})
				selectCover3.addEventListener('change', () => {
					if(selectCover3.value != '無し'){
						selectCover.disabled = true;
						selectCover2.disabled = true;
					}else{
						selectCover.disabled = false;
						selectCover2.disabled = false;
					}
				})
				
					
			

			});

Answer

ECマスターズ 田中様。
お世話になります。

頂いた内容に更新しましたが、
選択した際にエラーが出る状況です。
https://www.4860.jp/original-order/kubota/kub-ord-ng/test-kub-ord-ng

デベロッパーツールを確認した所、
HTML側の方でエラーが出ていると思われます。
書き方に問題あるでしょうか。

すみませんが、確認お願いします。###HR######IMG0e0cd731b4466dfdbab583147a7354f83.jpegIMG0###

Answer

ECマスターズの田中です。

それでは、お手数ですが
改めて、タグを下記内容にまるごと差し替えて
ご確認いただきますようお願いします。



// 「戻る」時に、ページを再読み込み
window.addEventListener("pageshow", function () {
	if (performance.getEntriesByType("navigation").map(function (p) { return p.type; }).join() === "back_forward") {
		window.location.reload();
	}
});


//基本モデル切替
$(function () {
	$(".tab li").click(function () {
		var num = $(".tab li").index(this);
		$(".tabContent").removeClass('active');
		$(".tabContent").eq(num).addClass('active');
		$(".tab li").removeClass('active');
		$(this).addClass('active')
	})
});


//2色以上選択した時
function checkradio(disp) {

	var kawaColor = document.getElementsByName("本体カラー*3");
	var kawa1 = document.getElementById("LC2List1");
	var kawa2 = document.getElementById("LC2List2");
	var kawa3 = document.getElementById("LC2List3");
	document.getElementById('colors').style.display = disp;

	if (kawaColor.value == "2色以上") {

	} else {
		//2色以上以外を選択した場合、プルダウンメニューをリセット
		kawa1.selectedIndex = 0;
		kawa2.selectedIndex = 0;
		kawa3.selectedIndex = 0;

	}

}

function bmatch(txt, chk) {
	if (txt.indexOf(chk) != -1) { return true; } else { return false; }
}
// 基本モデルを変更した場合のスクリプト
function changeModel(parts) {
	// 選んだ基本モデルのタイプを調べる
	var pitcher = false, infielder = false, outfielder = false, allposi = false;
	model = parts.options[parts.selectedIndex].value;
	if (model.match(/ピッチャー/i)) { pitcher = true; } //投手用
	if (model.match(/外野/i)) { outfielder = true; } //外野手用
	if (model.match(/オールポジション/i) || model.match(/オールラウンド/i)) { allposi = true; } //オールポジション
	if (model.match(/内野/i) || model.match(/セカンド/i) || model.match(/ショート/i) || model.match(/サード/i)) { infielder = true; } //内野手用

	// ウェブの選択可・不可変更処理(一番最初は飛ばす)
	var webList = document.getElementsByName('ウェブスタイル*4');
	for (var i = 1; i < webList.length; i++) {
		switch (true) {
			case pitcher && bmatch(webList[i].value, 'ピッチャー'): break;
			case infielder && bmatch(webList[i].value, '内野'): break;
			case outfielder && bmatch(webList[i].value, '外野'): break;
			case allposi && bmatch(webList[i].value, 'オールポジション'): break;
			default: webList[i].disabled = true; webList[i].selectedIndex = false; continue; break;
		}
		webList[i].disabled = false;
	}

	// バックスタイルの選択可・不可変更処理
	var bsList = document.getElementsByName('バックスタイル*5');
	if (model.match(/FM1型/i) || model.match(/FM5型/i) || model.match(/FM7型/i) || model.match(/FM8型/i)) {
		bsList[0].disabled = true; bsList[1].disabled = false;
	} else {
		bsList[1].disabled = true;
		bsList[0].disabled = false;
	}

	// 芯トジの選択可・不可変更処理
	var stList = document.getElementsByName('芯トジ形態*6');
	stList[0].disabled = true; stList[2].disabled = true; //タテトジと辻トジを一度選択不可にする
	if (allposi || pitcher || outfielder) { stList[0].disabled = false; } else { stList[0].checked = false } //タテトジ
	if (allposi || infielder) { stList[2].disabled = false; } else { stList[2].checked = false } //辻トジ
}

// ウェブレースカラー選択
function changeWeb(parts) {
	var elem = document.getElementsByName('ウェブレースカラー・オプション')[0];
	if (bmatch(parts.value, 'W-23') || bmatch(parts.value, 'W-26')) {
		elem.disabled = false;
	} else {
		elem.disabled = true; elem.selectedIndex = 0;
	}
}

//ブックマーク
function addBookmark(title, url) {
	if (window.sidebar) {
		window.sidebar.addPanel(title, url, "");
	} else if (document.all) {
		window.external.AddFavorite(url, title);
	} else if (window.opera && window.print) {
		return true;
	}
}

$(function () {

	let selectCover = document.getElementById('指カバーAカラー');
	let selectCover2 = document.getElementById('指カバーBカラー');
	let selectCover3 = document.getElementById('指あてカラー');

	selectCover.addEventListener('change', () => {
		if (selectCover.value != '無し') {
			selectCover2.disabled = true;
			selectCover3.disabled = true;
		} else {
			selectCover2.disabled = false;
			selectCover3.disabled = false;
		}
	})
	selectCover2.addEventListener('change', () => {
		if (selectCover2.value != '無し') {
			selectCover.disabled = true;
			selectCover3.disabled = true;
		} else {
			selectCover.disabled = false;
			selectCover3.disabled = false;
		}
	})
	selectCover3.addEventListener('change', () => {
		if (selectCover3.value != '無し') {
			selectCover.disabled = true;
			selectCover2.disabled = true;
		} else {
			selectCover.disabled = false;
			selectCover2.disabled = false;
		}
	})

});

Answer

ECマスターズ 田中様。
お世話になります。

頂いた、scriptの内容を反映致しました。
エラーなく、動くようになりました。
https://www.4860.jp/original-order/kubota/kub-ord-ng/test-kub-ord-ng

戻るを押した後、値が残るようにする設定は
どのように設定すればよろしいでしょうか。

ご教示のほど、お願い致します。

Answer

ECマスターズの田中です。

> 戻るを押した後、値が残るようにする設定は
> どのように設定すればよろしいでしょうか。

現在ページに設置されているscriptタグのうち、


// 「戻る」時に、ページを再読み込み
window.addEventListener("pageshow", function () {
if (performance.getEntriesByType("navigation").map(function (p) { return p.type; }).join() === "back_forward") {
window.location.reload();
}
});


上記内容を、
下記内容に差し替えていただきますようお願いします。


// 「戻る」時に、値をフォームに読込
$(function () {

	var f = 'form[action*="order-s.cgi"]'; //対象のフォームを特定
	var ssk = "gloveorder"; //sessionStorage内の名前

	window.addEventListener("pageshow", function () {
		if (performance.getEntriesByType("navigation").map(function (p) { return p.type; }).join() === "back_forward") {
			JSON.parse(sessionStorage.getItem(ssk)).forEach(function (nv) {
				document.querySelector(f)[nv.name].value = nv.value;
			});

			// *
		}
	});

	$(f).change(function () {
		sessionStorage.setItem(ssk, JSON.stringify($(this).serializeArray()));
	});

});

Answer

ECマスターズ 田中様。
お世話になります。

頂いた内容を入れて見たのですが、
動かなくなる項目もあり、デベロッパーツールでエラーが出ています。
https://www.4860.jp/original-order/kubota/kub-ord-ng/test-kub-ord-ng

記述方法は、下記の内容で合っていますでしょうか。
ご確認、お願い致します。

	// 「戻る」時に、値をフォームに読込
	$(function () {

	var f = 'form[action*="order-s.cgi"]'; //対象のフォームを特定
	var ssk = "gloveorder"; //sessionStorage内の名前

	window.addEventListener("pageshow", function () {
	if (performance.getEntriesByType("navigation").map(function (p) { return p.type; }).join() === "back_forward") {
	JSON.parse(sessionStorage.getItem(ssk)).forEach(function (nv) {
	document.querySelector(f)[nv.name].value = nv.value;
	});


	//基本モデル切替
	$(function () {
	$(".tab li").click(function () {
	var num = $(".tab li").index(this);
	$(".tabContent").removeClass('active');
	$(".tabContent").eq(num).addClass('active');
	$(".tab li").removeClass('active');
	$(this).addClass('active')
	})
	});


	//2色以上選択した時
	function checkradio(disp) {

	var kawaColor = document.getElementsByName("本体カラー*3");
	var kawa1 = document.getElementById("LC2List1");
	var kawa2 = document.getElementById("LC2List2");
	var kawa3 = document.getElementById("LC2List3");
	document.getElementById('colors').style.display = disp;

	if (kawaColor.value == "2色以上") {

	} else {
	//2色以上以外を選択した場合、プルダウンメニューをリセット
	kawa1.selectedIndex = 0;
	kawa2.selectedIndex = 0;
	kawa3.selectedIndex = 0;

	}

	}

	function bmatch(txt, chk) {
	if (txt.indexOf(chk) != -1) { return true; } else { return false; }
	}
	// 基本モデルを変更した場合のスクリプト
	function changeModel(parts) {
	// 選んだ基本モデルのタイプを調べる
	var pitcher = false, infielder = false, outfielder = false, allposi = false;
	model = parts.options[parts.selectedIndex].value;
	if (model.match(/ピッチャー/i)) { pitcher = true; } //投手用
	if (model.match(/外野/i)) { outfielder = true; } //外野手用
	if (model.match(/オールポジション/i) || model.match(/オールラウンド/i)) { allposi = true; } //オールポジション
	if (model.match(/内野/i) || model.match(/セカンド/i) || model.match(/ショート/i) || model.match(/サード/i)) { infielder = true; } //内野手用

	// ウェブの選択可・不可変更処理(一番最初は飛ばす)
	var webList = document.getElementsByName('ウェブスタイル*4');
	for (var i = 1; i < webList.length; i++) {
	switch (true) {
	case pitcher && bmatch(webList[i].value, 'ピッチャー'): break;
	case infielder && bmatch(webList[i].value, '内野'): break;
	case outfielder && bmatch(webList[i].value, '外野'): break;
	case allposi && bmatch(webList[i].value, 'オールポジション'): break;
	default: webList[i].disabled = true; webList[i].selectedIndex = false; continue; break;
	}
	webList[i].disabled = false;
	}

	// バックスタイルの選択可・不可変更処理
	var bsList = document.getElementsByName('バックスタイル*5');
	if (model.match(/FM1型/i) || model.match(/FM5型/i) || model.match(/FM7型/i) || model.match(/FM8型/i)) {
	bsList[0].disabled = true; bsList[1].disabled = false;
	} else {
	bsList[1].disabled = true;
	bsList[0].disabled = false;
	}

	// 芯トジの選択可・不可変更処理
	var stList = document.getElementsByName('芯トジ形態*6');
	stList[0].disabled = true; stList[2].disabled = true; //タテトジと辻トジを一度選択不可にする
	if (allposi || pitcher || outfielder) { stList[0].disabled = false; } else { stList[0].checked = false } //タテトジ
	if (allposi || infielder) { stList[2].disabled = false; } else { stList[2].checked = false } //辻トジ
	}

	// ウェブレースカラー選択
	function changeWeb(parts) {
	var elem = document.getElementsByName('ウェブレースカラー・オプション')[0];
	if (bmatch(parts.value, 'W-23') || bmatch(parts.value, 'W-26')) {
	elem.disabled = false;
	} else {
	elem.disabled = true; elem.selectedIndex = 0;
	}
	}

	//ブックマーク
	function addBookmark(title, url) {
	if (window.sidebar) {
	window.sidebar.addPanel(title, url, "");
	} else if (document.all) {
	window.external.AddFavorite(url, title);
	} else if (window.opera && window.print) {
	return true;
	}
	}

	$(function () {

	let selectCover = document.getElementById('指カバーAカラー');
	let selectCover2 = document.getElementById('指カバーBカラー');
	let selectCover3 = document.getElementById('指あてカラー');

	selectCover.addEventListener('change', () => {
	if (selectCover.value != '無し') {
	selectCover2.disabled = true;
	selectCover3.disabled = true;
	} else {
	selectCover2.disabled = false;
	selectCover3.disabled = false;
	}
	})
	selectCover2.addEventListener('change', () => {
	if (selectCover2.value != '無し') {
	selectCover.disabled = true;
	selectCover3.disabled = true;
	} else {
	selectCover.disabled = false;
	selectCover3.disabled = false;
	}
	})
	selectCover3.addEventListener('change', () => {
	if (selectCover3.value != '無し') {
	selectCover.disabled = true;
	selectCover2.disabled = true;
	} else {
	selectCover.disabled = false;
	selectCover2.disabled = false;
	}
	})

	});

	}
	});

	$(f).change(function () {
	sessionStorage.setItem(ssk, JSON.stringify($(this).serializeArray()));
	});

	});

Answer

ECマスターズの田中です。

ページを確認したところ、
前回の返信にて
「下記内容に差し替えていただきますようお願いします。」
としてご案内差し上げたソースの後半部分、

}
});

$(f).change(function () {
sessionStorage.setItem(ssk, JSON.stringify($(this).serializeArray()));
});

});

が、下部分に設置されておりましたので、
私よりご案内差し上げたとおり、
上下に分けず、そのまま置き換えていただきますようお願いします。

Answer

ECマスターズ 田中様。
お世話になります。

ご指摘、ありがとうございます。
早速修正致しました。
https://www.4860.jp/original-order/kubota/kub-ord-ng/test-kub-ord-ng

選択時の動作に問題が無くなりましたが、
「2　レザー（本体）カラーを選択して下さい」 の項目で
①2色を選択
②プルダウンメニューを選択
③「オーダー内容の確認」をクリック
④戻るボタンをクリック
を行った所、ラジオボタンの選択は保持していますが、
選択した際のプルダウンメニューの内容が初期化している状態です。

記述内容を変えた方が箇所がありましたら、ご教示のほどお願い致します。###HR######IMG09ca193bfd5224aaf30c4fcd25e52620a.jpegIMG0###

Answer

ECマスターズの田中です。

scriptタグ内に含まれる
if (kawaColor.value == "2色以上") {
の指定が誤っており、常にfalse、つまりプルダウンメニューのリセットが行われる状態となっております。

上記行を
if (Array.from(kawaColor).filter(function(r){return r.checked;}).pop().value == "2色以上") {
にご変更の上、動作をご確認願います。

Answer

ECマスターズ 田中様。
お世話になります。

ご確認、ありがとうございます。
戻るボタンをクリックして、値が残っていたのを確認できました。
https://www.4860.jp/original-order/kubota/kub-ord-ng/test-kub-ord-ng

戻るボタンを押しても、見た目の制御を保持した状態にする方法は、設定可能でしょうか？
※イメージ、添付画像（javascript_制御.jpg）

ご存知でしたら、ご教示のほどお願い致します。###HR######IMG09f314a211b502c011326eb12a8876bd3.jpegIMG0###

Answer

ECマスターズの田中です。

> 戻るボタンを押しても、見た目の制御を保持した状態にする方法は、設定可能でしょうか？

はい。
scriptタグ内、// * と } の間に、
選択したカラーに応じて見た目を表示する処理を加えていただければ可能です。

たとえば、下記のようになります。

if(document.querySelector(f)["本体カラー*3"].value == "2色以上"){
	checkradio("block");
} else {
	checkradio("none");
}

Answer

ECマスターズ 田中様。
お世話になります。

頂いた内容を追加致しました。
戻るボタンを押しても、表示した状態を確認できました。

選択肢の内容によって、ラジオ・プルダウンメニューの
選択可否の状態を保持するには、どのように記述すればよろしいでしょうか。

選択肢1つずつの指定になりますでしょうか。

参考になる記述方法がありましたら、ご教示お願い致します。

Answer

ECマスターズの田中です。

> 選択肢の内容によって、ラジオ・プルダウンメニューの
> 選択可否の状態を保持するには、どのように記述すればよろしいでしょうか。

scriptタグ内に記載されております
changeModel、changeWeb 各関数がご希望の処理内容かと思いますので、
各関数が動作する要素のイベントハンドラを発火させる記述をしていただければ結構です。

すみません、先のソースに一部追記すべき点がございましたので、
先のソースと併せて、下記内容に差し替えをお願いします。

if(document.querySelector(f)["本体カラー*3"].value == "2色以上"){
checkradio("block");
} else if(document.querySelector(f)["本体カラー*3"].value !== "") {
checkradio("none");
}
$(document.getElementById('基本モデル*1')).trigger('change');
$('input[name*="ウェブスタイル*4"]:checked').trigger('click');

Answer

ECマスターズ 田中様。
お世話になります。

頂いた内容を差し替えました。
行いたい内容で表示を確認できました。
ありがとうございます。

頂いた内容を基に、「14 指カバー・指あての有無を選択して下さい」の箇所も
設定を行いましたが、戻るボタンを押しても選択できてしまう状態のままでした。（選択_未保持.jpg）
プルダウンメニューのため、「基本モデル*1」を流用しました。
https://www.4860.jp/original-order/kubota/kub-ord-ng/test-kub-ord-ng

▼戻るボタンを押した際の記述
$(document.getElementById('指カバーAカラー')).trigger('change');
$(document.getElementById('指カバーBカラー')).trigger('change');
$(document.getElementById('指あてカラー')).trigger('change');


記述に問題があるか確認、お願いします。###HR######IMG02903d14e2576f90324076a4220cdc9e2.jpegIMG0###

Answer

ECマスターズの田中です。

jQueryを利用する方法ですとうまく動作しなかったので、

if(document.getElementById('指カバーAカラー').selectedIndex > 0) document.getElementById('指カバーAカラー').dispatchEvent(new Event('change'));

上記のように、jQueryを使わない方法にご変更をお願いします。
値が選択されている際に動作すると正常に動作しないため、if文による条件を加えております。
他の項目も同様にご記載いただくことができます。