別ページで選択された要素のテキストをJavaScriptで取得して表示したい

前提・実現したいこと

WordPress内でAページにプルダウンメニュー(SelectBox使用)を配置し、選択した要素のidをパラメータに設定し指定のページ(BページかCページ)へ遷移するようにしています。
そこでBページまたはCページに遷移後、設定されたパラメータを基にAページで選択した要素のテキストを取得して遷移後のページ内の特定箇所に表示をさせるのを目標にしています。

現状、JavaScriptでパラメータを取得して同ページ内のidを検索して要素を取得することは実現できています。
しかし、別ページの要素を取得することができていません。

該当のソースコード

html
1    //ページA
2	<span>
3		<select class="iframe_value" id="iframe_value" onchange="location.href=value">
4	        <option class="" value="iframe-B.html/?test1&amp;">テスト1</option>
5	        <option class="" value="iframe-B.html/?test2&amp;">テスト2</option>
6	        <option class="" value="iframe-B.html/?test3&amp;">テスト3</option>
7	    </select>
8	</span>

html
1//ページB・ページC
2<div class="select_message">
3	<span>選択した値は</span>
4	<div class="select_text" id="select_text">(ここに表示させる)</div>
5	<span >です</span>
6</div>

試したこと

iframeタグを使用すると別ページの要素取得が可能ということはわかったのですがこちらを活用してセレクトボックスの要素を取得する方法は出てきませんでした。
また、今後のメンテナンスの関係でAjaxやjQueryは使用せず作成したいです。
どうしたら別ページの要素を取得できるのでしょうか？
方法をご存じの方がいらっしゃいましたらご教示お願いします。

##追記
一応パラメータを使用して同名idを取得するJavaScriptコードを記述致します。

JavaScript
1    let parameter;
2    if(window.location.search){
3       parameter = window.location.search.substring(1,window.location.search.length)
4    }

Lhankor_Mhy

2020/03/27 03:50

「こちらを活用してセレクトボックスの要素を取得する方法は出てきませんでした」とのことですが、具体的には何が起きて何が出てこなかったのでしょうか？　希望していた動作はどのようなものですか？また、JavaScript のコードもご提示ください。期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3 結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 エラーメッセージや実行ログをコピー&ペーストしましょう https://teratail.com/help/question-tips#questionTips3-4-2 ソースコードを書きましょう https://teratail.com/help/question-tips#questionTips3-5-1

Miken_work

2020/03/27 04:24 編集

期待する処理ができるメソッドや、コードが分からず提示できるJavaScriptなどはありません。希望の動作は”別ページの要素を取得すること”です

Lhankor_Mhy

2020/03/27 06:58

提示できるコードがないのですね、了解しました。つまり、何がわからないのかがわからない状態、という理解でいいですか？

tabuu

2020/03/27 07:00

>希望の動作は”別ページの要素を取得すること”です別のページの要素は取得できません。何らかの形で次のページに渡してください。どのように渡すかについても、次のページへの遷移の手法に依存しますので、次のページへの遷移についてのソースコードを提示されたらよいかと思います。

Lhankor_Mhy

2020/03/27 07:03

(ここに表示させる)の部分には、何を表示すればいいのでしょうか？たとえば、ご提示のページAで「テスト3」を選択してページBに移動した場合、表示すべきものを例示していただけますか？

Miken_work

2020/03/27 07:08

設定されたパラメータを基にAページで選択した要素のテキストを取得して遷移後のページ内の特定箇所に表示をさせるのを目標にしています。

Lhankor_Mhy

2020/03/27 07:49

例示はしていただけないのですね？テキストを直接パラメータに持たせることは、ご検討されましたか？

Miken_work

2020/03/27 08:24

大変失礼しました。例示の記載ができていなかったです。申し訳ございません。「テスト3」を選択した場合、ページBで表示したい内容は選択した値内にある「テスト3」というテキストが表示されるようにしたいです。パラメータに持たせることについてですがパラメータは別用途でも使用しています。都合上ですができればパラメータには設定せず実現させたいです。

行動規範の内容に同意します

回答2件

ベストアンサー

ご希望に合うかどうかわかりませんが、フラグメントに埋める方法をご提案します。iframeを使うのはやめておいた方がいいかと思います。

html
1        <select class="iframe_value" id="iframe_value" onchange="location.href=value+'#'+encodeURIComponent(selectedOptions[0].textContent)">

js
1    document.getElementById('select_text').textContent = decodeURIComponent(location.hash.slice(1));

コメントを受けて追記

selectedOptionsという箇所をどう書き換えるとラジオボタン・チェックボックスに反映できるのでしょうか？

この場合、ラジオボタンなどはセレクトボックスと異なりテキストを持ちませんから、「選択した要素のラベルのテキスト」と読み替えていいのですよね？
当方では、↓こちらで動作しました。

html
1<input type="radio" id="test1" name="drone" value="iframe-B.html?test1&amp;" onchange="location.href=value+'#'+encodeURIComponent(this.labels[0].textContent)">
2<label for="test1">テスト1</label>

投稿2020/03/27 08:21

編集2020/03/30 04:46

Lhankor_Mhy

総合スコア36115

Miken_work

2020/03/27 08:25

ご回答ありがとうございます。そのような方法があるとは知りませんでした。初めて目にする方法なのでコードの理解を深めつつ試してみます。ありがとうございます。

Miken_work

2020/03/30 04:26

今反映させていただいて、プルダウンの場合では表示されました。ありがとうございます。追加になってしまうのですが、ラジオボタンや、チェックボックスを選択した際にも同じようにテキスト表示されるようにしたいのですが、 selectedOptionsという箇所をどう書き換えるとラジオボタン・チェックボックスに反映できるのでしょうか？もしくは、こちらの方法はラジオボタンとチェックボックスには対応していないのでしょうか？