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

Question

分かりましたら記述を教えていただけると助かります。
よろしくお願いします。

■対応したい事

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

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

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

また、必ず北海道になる訳ではありません。
要素の文字を取得で判断ではなく、読み込み時はoptionの一個目がセレクトされた状態で、

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

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

■HTML

<select class="select">
  <option>北海道</option>
  <option>東京</option>
  <option>大阪</option>
  <option>兵庫</option>
  <option>京都</option>
</select>

  <ul>
  <li class="area">北海道エリア</li>
  <li class="area">東京エリア</li>
  <li class="area">大阪エリア</li>
  <li class="area">兵庫エリア</li>
  <li class="area">京都エリア</li>
</ul>

■css

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

■jQuery

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

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

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

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

Answer 1

https://teratail.com/questions/308935

再質問させていただいた所、こちらで解決できました。

Answer 2

こちらでよろしいしょうか？

<select class="select">
  <option>北海道</option>
  <option>東京</option>
  <option>大阪</option>
  <option>兵庫</option>
  <option>京都</option>
</select>

  <ul>
  <li class="area">北海道エリア</li>
  <li class="area">東京エリア</li>
  <li class="area">大阪エリア</li>
  <li class="area">兵庫エリア</li>
  <li class="area">京都エリア</li>
</ul>

.area.hide {
    display: none;
}

// 読み込み時
$(function() {
	hoge('北海道');
});

// 変更時
$('.select').on('change', function(){
	// テキストを取得(例：北海道)
	var area = $(this).children(':selected').text();
	hoge(area);
});

// 変更アクション
function hoge(area){
	$('.area').addClass('hide');
	$('.area').each(function(){
		// 全て非表示にする(初期化)
		$(this).addClass('hide');

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

Comments

[M.Kota]

早速のご回答いただき、有難うございます。

説明不足でもうしわけないです。
selectエリアの要素はシステムで自動で出力された情報を利用するため、
必ず北海道になる訳ではありません。

要素の文字を取得で判断ではなく、読み込み時はoptionの一個目がセレクトされた状態で、
<li class="area">一個目のエリア</li>
が表示されている状態にしたいです。

こちら、実現できますでしょうか？
お手数おかけいたしますが、ご確認お願いします。

[premiummalts]

こちらでできると思います

// 読み込み時
$(function() {
var area = $('.select option:first').text();
hoge(area );
});

[M.Kota]

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

読み込み時　の表示の変更は出来ました。
有難うございます。

あと一つお聞きしたのですが、
if($(this).html().match(area+'エリア')){
の部分も必ずliの本文の中に、「エリア」という文字が入るわけではありません。
要素の文字を取得で判断では無い方法はありますでしょうか？

度々申し訳ございませんが、ご確認お願いします。

[premiummalts]

> 要素の文字を取得で判断では無い方法

正規表現というテクニックで判断できます
しかしもう少し細かい条件が必要です

例えば「北海道エリア」でなく「北海道地域」などがありえるということでしたら、「北海道という文字が先頭に来る」という正規表現で、この2ついずれにも対応できます

しかしその正規表現では「真冬の北海道エリア」には対応できなくなります

さりとて「北海道という文字を含む」という正規表現にしてこれら３つに対応できるようにするならば、「北海道エリア」と「真冬の北海道エリア」があったとき、一義に決まらなくなります

なので一義に決まるような条件を考えて頂く必要があるということです

あと私は正規表現はあまり得意ではないので、その条件が決まりましたら別途質問を立てるのがいいと思います

[M.Kota]

返信、有難うございます。
もう一度実装したい内容を纏め、
正規表現で実現できるか質問してみようかと思います。

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