selectのoption選択で要素を表示非表示させたいです

Question

一度同様の内容を投稿したのですが、こちらの説明が不十分だったため、改めて質問をさせていただきます。
分かりましたら記述を教えていただけると助かります。
どうぞよろしくお願いします。

■対応したい事

selectのoption選択で表示エリアの要素を表示非表示にしたいです。
ページを閲覧した際の最初は、一番上のオプションのみが表示されている状態にしたいです。

例えば下記コードだと、最初にページを閲覧した際は「2020年」のみ表示されており、
2019年を選択する事で「2020年」は消え、「2019年」が表示されるようにしたいです。

■お願いしたい注意点
selectエリアの要素はシステムで自動で出力された情報を利用するため、
HTML記述側の変更はしたくありません。
よって、<option>最初の一個目だけ何かhtml側の記述を変更する等の対応をしたくないです。

また、必ず文字列が2020年になる訳ではありません。
要素の文字を取得で判断ではなく、読み込み時は<option disabled selected value>では無い、

<option class="year">の一個目がセレクトされた状態で、 <li class="area">一個目のエリア</li> が表示されている状態にしたいです。

■記述例

現状の記述例ですが、
今の状態だとページを最初に表示した際に
2020年、2019年、2018年、2017年
全てのエリアが表示されています。
これを、ページ遷移してきた時liの一個目、2020年に対応するliのみ表示させたいと考えています。

<select class="select">
<option disabled selected value>年を選択</option>
  <option class="year">2020年</option>
  <option class="year">2019年</option>
  <option class="year">2018年</option>
  <option class="year">2017年</option>
</select>

  <ul>
  <li class="area">2020年を選択した際と、このページを一番最初に見たときに表示されるエリア</li>
  <li class="area">2019年を選択した際に表示される箇所 </li>
  <li class="area">2018年を選択した際に表示される箇所　中身に規則性は無いです</li>
  <li class="area">2017年を選択した際に表示される箇所</li>
</ul>

li.hide {
  /* 表示の切り替えに使用する */
  display: none;
}

  $('.select').on('change', function(){
    // テキストを取得(例：2020年)
    var area = $(this).children(':selected').text();

    $('.area').each(function(){
      // 全て非表示にする(初期化)
      $(this).addClass('hide');

     if($(this).html().match(area)){
        // 表示する
        $(this).removeClass('hide');
      }
    });
  });

要望が多くお手数おかけしますが、jQuery側の記述の変更で対応できるコードの改修があれば教えて頂けたらと思います。

どうかご確認お願いします。

Answer 1

私の理解が間違っていなければ、システムから出力されるテキスト依存ではなくhtmlに書き出される順番に基づいて表示・非表示ということは、以下のようなやり方がいいと思いますがいかがでしょうか。

/* 最初のページロード時に全項目が一瞬表示されるのを避けるため、.hideで隠すのではなく.showで表示する */
.area {
	display: none;
}
.area.show {
	display: list-item;	/* またはblockなど */
}

$(function(){
	area_control(0);
	
	$('.select').on('change', function(){
		let op_index = $(this).prop('selectedIndex') - 1;
		area_control(op_index);
	});
});

function area_control(n){
	$('.area.show').removeClass('show');
	$('.area').eq(n).addClass('show');
}

Comments

[M.Kota]

返答有難うございます。
こちらの記述で実現したかった表示が再現出来ました。
考え方を変える発想が無かったので、勉強になります。
丁寧なソースをいただき、とても助かりました。
この度は本当に有難うございました。
また、質問を投稿した際にはよろしくお願いいたします。

Answer 2

css違うだけですね。スペース入れると子要素のhideになっちゃう

li.hide {
  /* 表示の切り替えに使用する */
  display: none;
}

Comments

[M.Kota]

ご回答ありがとうございます。
こちら、cssの記述ですが質問依頼を書く際にス誤ってスペースが入ってしまいました。
検証している方ではスペースが入っておりません。
（質問の方も変更しました）
大変失礼いたしました。

その状態で、ページ表示時にはすべてのliの要素が表示されている状態です。
お手数おかけしますが、改めてご確認お願いいたします。