上部リンク(a)を押すと下部optionが連動して切り替わり、上部から下部へ移動できるようにしたい

前提

HTML上部にリンク(a)、下部にoptionを選択するとそれに応じliが表示されるJavascriptが入ったコードがあります。

実現したいこと

上部リンク(a)を押すと下部optionが連動して切り替わり、上部から下部へ移動できるようにしたいです。
なかなか該当するようなJavascriptコードがネットに見つからず困っております。
HTML/CSSだけで実行できるならJavascriptでなくとも結構です。
よろしくお願いいたします。

該当のソースコード

【上部】
<section>
<div class="search-word">
<a href="#keyword01">ワード1</a>
<a href="#keyword02">ワード2</a>
<a href="#keyword03">ワード3</a>
<a href="#keyword04">ワード4</a>
<a href="#keyword05">ワード5</a>
</div>
</section>




【下部】
<select id="selectKeyword">
<option value="keyword01" selected="selected">キーワードから探す</option>
<option value="keyword01">ワード1</option>
<option value="keyword02">ワード2</option>
<option value="keyword03">ワード3</option>
<option value="keyword04">ワード4</option>
<option value="keyword05">ワード5</option>
</select>

<ul class="result">
<li id="keyword01">内容1</li>
<li id="keyword02">内容2</li>
<li id="keyword03">内容3</li>
<li id="keyword04">内容4</li>
<li id="keyword05">内容5</li>
</ul>

コメントを投稿

0 コメント