JavaScript：①ページを切り替え後、②選択テキストの値を選択状態にしたい。

Question

前提・実現したい事

JavaScriptを利用し、
①「投稿記事一覧ページ」 → 「編集ページ」 に切り替え。
↓
②編集ページ内にある、選択テキストの値を選択状態にしたい
・・・と考えておりますが、上手く行かず困っております。

【例1】
投稿記事一覧のページ内に、「EDIT BOTTON」を作成し
ボタンを押すと、JavaScriptが起動し『編集ページ』が開かれる。

【例2】
編集ページ内に、「SELECT BOTTON」を作成し、
ボタンを押すと、JavaScriptが起動し『選択テキスト内の値を選択状態』にする。

上記、『例1・例2』のように、各ページにボタンを作成し
ボタンが押されたら処理が実行されるようにすると動作しますが、
2つの処理を1つにまとめると、【例1】の処理しか行われません。

発生している問題・Error Message

【実装テスト予想】
投稿記事一覧に、「EDIT SELECT BOTTON」を作成し、ボタンが押されたら
投稿記事一覧ページ → 編集ページ に切り替わり、選択テキストの値が、選択状態になっている。

【実装テスト結果】
投稿記事一覧に、「EDIT SELECT BOTTON」を作成し、ボタンを押すと・・・
投稿記事一覧ページ → 編集ページ に切り替わる。 のみです。
テキストの値が選択されず、困っております。

実際のソースコード

/*****************************************************************************/
// ボタン押下後、編集ページに切り替え。 その後、 選択テキストの値を選択状態にする。
/*****************************************************************************/
function editSelectBotton() {

	/*---------------------------------------------------------------------------*/
	//編集ページに切り替え。 (同ウインドウ内で処理。別ウインドウで新たにページを開かない。)
	/*---------------------------------------------------------------------------*/
	document.location.href = "https://○○.××.△△.□□";	// 編集ページURL
	// alert("1");		// デバック用

	/*---------------------------------------------------------------------------*/
	// 変数宣言
	/*---------------------------------------------------------------------------*/
	var textID	 = "Select_Text_ID";					  // 対象テキストID
	// alert("2");		// デバック用

	/*---------------------------------------------------------------------------*/
	// 選択指定
	/*---------------------------------------------------------------------------*/
	document.getElementById(textID).querySelector("[title=トリュフ]").selected   = true;
	document.getElementById(textID).querySelector("[title=フォアグラ]").selected = true;
	document.getElementById(textID).querySelector("[title=キャビア]").selected   = true;
	// alert("3");		// デバック用
}

試した事

どこまで処理がされているか、デバック用に各ブロックの最後に、数字をアラート表示させました。
すると、ページが切り替わる時（画面が白くなる時）に、アラートで「"1" と "2"」が表示されました。

自分の中の考えでは、編集ページが完全に読み込まれていない（表示されていない）為、
コードの【選択指定】が読まれていないと考えました。

「window.onload」も試しましたが、結果は一緒でした。

補足情報(言語/FW/ツール等のVersion)

Browser → IE,Google Chrome

Answer 1

Ajaxなどではなく、本当に遷移してしまったらそれまでのスクリプトはなくなってしまいます。
遷移するならURLパラメーター(あるいはハッシュ)なりCookieなりで値を渡したうえ、遷移先でそれらを処理する必要があります。

Comments

[mie.8]

ご回答ありがとうございます。

Answer 2

document.location.hrefは「移動」なので画面が完全に切り替わります。
alert()が出力されたのは一瞬で切り替わるわけではないためです。
一覧画面にはSelect_Text_IDという名のコントロールはありませんよね。
デベロッパーツールなどで見るとコンソールにページ遷移の直前にエラーが出ているはずです。

ご提示のソースのように固定情報を表示させたいのであれば編集ページ側で
window.onloadを発生させてselectの処理をすると良いでしょう。
一覧画面→編集画面で何か情報を渡したいのであればQueryStringなどを使うと良いでしょう。

Comments

[mie.8]

ご回答ありがとうございます。