外部のHTMLファイルを別HTMLページ内に反映させたい

Question

下記のソースをjsファイルの様な外部のHTMLファイルとして作成し別のHTMLファイル内に表示させたいです
JavaScriptへの値の受け渡しも行えるようにしたいです

<select id="item" name="item">

<option default value="1">好きなアクセサリー</option>
<option value="2">指輪</option>
<option value="3">ネックレス</option>
<option value="2">ブレスレット</option>
<option value="1.5">イヤリング</option>

</select>

iframeで上記のソースを表示させる方法を試しましたがJavaScriptへの値の受け渡しが上手くいかず動作しませんでした

var item;
item=document.getElementById("item").value;

Comments

[m.ts10806]

どういう動作を想定しているかもっと具体的に記載いただけますか？
また、ご自身が試したこと調べたことを記載してください

[yambejp]

さっぱりわからないのに加えてoptionの２番め以降の値が全部2なので
条件分岐も失敗しそうです

[miyabi_pudding]

もしかして、
HTML Importsのことですか？？
Web Componentsの仕様から、外部HTMLを読み込むというやつです。

いや、iframeでもいいなら、とにかく外部のHTML使えればそれでいいってことですね・・・。

[m.ts10806]

iframeでもなんでもいいですが、何が外部で何が別htmlなのかこの内容だけでは不明瞭です。
コードと共にそれぞれ明示してください。

[miyabi_pudding]

BAいただいておいてなんですが、
m.ts10806さんのご質問の部分も、質問本文に記載してください。
外部というのが、同じサーバー内なのか、はたまた、別サーバーに置かれているものなのか、
ローカルで完結する（ローカル上で、あるHTMLファイルから別ファイルのHTMLを読み込みたい）などのやりたいこと、状況によって、話はまるで変わってきます。
よって、回答しておいてなんですが、私の回答が正しくならない可能性があります。

[m.ts10806]

質問者から「どのように解決としたのか」を回答者に伝えるのもマナーです。
ガイドラインにあります
https://teratail.com/help/question-tips#questionTips4-2

回答の意図を汲み取れているか、きちんと活かせることができそうかを伝えてあげてください。
回答者本人も仰っていますが、要件次第ではもっと適切な対応方法が存在することもありえます。
あくまで「問題解決」を主眼に置いてもらいたいです。
(回答者側としては回答のお礼よりも、きちんと問題が解決できたか理解できたか伝わったかの方が大事です)

Answer 1

Web Componentsの仕様の一つである、HTML Importsを使えば、
HTMLとJavaScriptのみで、外部HTMLを容易に使用することができます。

Web Components

しかし、現代においても、まだこの仕様をサポートしているブラウザはごく一部で、
Chrome、Operaのみが標準サポートとなっています。

なので、大きく分けて二点ほど、現代においても外部のHTMLを使用する方法を記載します。

• PHPなどの、サーバーサイドテクノロジーを使う

サーバーサイドのスクリプトなどを使えるサーバーなのであれば、これが一番手っ取り早いです。
やり方は、ご自身でお調べください。

• JavaScriptにて、iframe内のコンテンツ要素を、読み込む方法

クライアントサイドでやるなら、現代ではこの方法が一番ポピュラーですが、ブラウザのセキュリティがうるさい現代だとかなりやりずらくなっています。
ローカルファイルならびに、別ドメインの外部HTMLである場合、ブラウザのオプション起動（ローカルの場合）、サーバーの設定（別ドメインの外部HTMLがおいてあるサーバーで、クロスドメインアクセスを許可する）をしないと、読み込んで中の要素を使用しようとすると、CORSエラーがでて、読み込みさえできません。
これは、セキュリティ的に、外部からのサイト改変やらの攻撃を防ぐための仕組みなので、
上記の工夫や設定をするほかありません。
こちらの方法も、まずはご自身で調べてみましょう。