javascriptを使用して選択されたselectboxのoptionのvalueの内容を同html内に表示切替させたい。

前提・実現したいこと

javascriptでselectboxの中から選択されたoptionのvalueの内容を同html内に表示切替
出来る様にして居ます。

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

infomation.html:43 Uncaught TypeError: Cannot read property 'style' of undefined
    at select (infomation.html:43)
    at HTMLSelectElement.onchange (infomation.html:92)
select @ infomation.html:43
onchange @ infomation.html:92

該当のソースコード

<html>
<script type="text/javascript">
	function select() {
		// 選択機能の要素取得
		var options = document.formSb.selectY.getElementsByTagName('option');
		// セレクトボックスの指定選択を取得
		for (var i = 0; i < options.length; i++) {
			if (options[i].selected) {
				// 全部消す
				options.value.style.display = 'none';
				// 指定箇所のみ表示
				options[i].value.style.display = 'block';
			}
		}
	}
</script>
<form name="formSb" class="formSb">
			<label class="date">年:
				<select name="selectY" class="selectY" onChange="select()">
					<option value="#2010">2010</option>
					<option value="#2011">2011</option>
					<option value="#2012">2012</option>
					<option value="#2013">2013</option>
					<option value="#2014">2014</option>
					<option value="#2015">2015</option>
					<option value="#2016">2016</option>
					<option value="#2017">2017</option>
					<option value="#2018">2018</option>
					<option value="#2019">2019</option>
					<option value="#2020">2020</option>
					<option value="#2021"selected>2021</option>
				</select>
			</label>
			<div class="page">
				<div id="2010" class="pageY" style="display:none;">
					<div class="pic">
						<p class="img1"><a href="image/.png" rel="lightbox" alt="" title=""></a></p>
					</div>
					<div class="col">
						<h2></h2>
						<p></p>
					</div>
				</div>
--------------------------------ここから同項目が複数並列----------------------------------
				<div id="2021" class="pageY" style="display:block;">
					<div class="pic">
						<p class="img1"><a href="image/.png" rel="lightbox" alt="" title=""></a></p>
					</div>
					<div class="col">
						<h2></h2>
						<p></p>
					</div>
				</div>
			</div>
</form>
</html>

試したこと

一度既に表示されて居る項目を非表示にしてから選択されたoptionのvalue値を出力しょうと致しました。
selectのoption要素は追加予定ですのでselectに拘って居ます。
elseif文だと数が多いのでfor文で処理致しました。

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

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

js
1for (var i = 0; i < options.length; i++) {
2    if (options[i].selected) {
3        // 全部消す
4        options.value.style.display = 'none';
5        // 指定箇所のみ表示
6        options[i].value.style.display = 'block';
7    }
8}

options は HTMLCollection 型で、valueというプロパティはない。
options[i].value は文字列。要素ではない。

やりたかったのは以下のような感じでしょうか。

js
1for (var i = 0; i < options.length; i++) {
2    const div = document.querySelector(options[i].value);
3    div.style.display = options[i].selected ? 'block' : 'none';
4}

投稿2021/04/13 06:15

int32_t

総合スコア21695

退会済みユーザー

2021/04/13 06:41

前回に引き続ぎ迅速な回答誠に有難う御座います。端的な指摘有難う御座います。助かります。 <div class="page"></div>内の表示を年代別に入れ替えたいのですが、int32_tさんの提案して下さったコードでは動作致しませんでした。 selectのonChange="select()"は不要なのでしょうか？それともoptionのvalueで＃2010だけでは表示が変更されないのでしょうか？御回答頂ければ幸いです。

int32_t

2021/04/13 06:50

おっと、失礼しました。ID名が数字で始まっているので、querySelector() ではダメですね。「document.querySelector(options[i].value)」を「document.getElementById(options[i].value.substr(1))」に変えるか、ID名を数字以外で始めてください。

退会済みユーザー

2021/04/13 07:05

連続して迅速な回答どうも有難う御座います！そして解決致しました☆それから質問不足失礼致しました！何と！？ID名が数字で始まるとquerySelector() では駄目なんですか？！若しかすると私が実行したかった事柄は中級以上で無いと無謀でしたか？ document.getElementById(options[i].value.substr(1))こう言う書き方は検索しても確認出来ませんでした。本当に有難う御座います！続けての御教授感謝の念が尽きません！

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

こういうのはstyleをいじるよりはクラスの付け替えで処理するほうが楽です。

javascript
1<style>
2.pageY:not(.active){
3display:none;
4}
5</style>
6<script>
7function select(obj) {
8  document.querySelector('.pageY.active')?.classList.remove('active');
9  document.querySelector(`[id="${obj.value.substr(1)}"]`)?.classList.add('active');
10}
11</script>
12<select name="selectY" onChange="select(this)">
13<option value="#2018">2018</option>
14<option value="#2019">2019</option>
15<option value="#2020">2020</option>
16<option value="#2021"selected>2021</option>
17</select>
18<div id="2018" class="pageY">2018</div>
19<div id="2019" class="pageY">2019</div>
20<div id="2020" class="pageY">2020</div>
21<div id="2021" class="pageY active">2021</div>
22