div で作られたドロップダウン ボックスを使用して、指定した div に文字でジャンプするにはどうすればよいですか? _html/css_WEB-ITnose

写真に示すように、文字側に div があり、下に 26 文字の指定されたブランド div があります。文字をクリックすることでジャンプすることもできます。右側の文字で指定された div にコピーされます。

ディスカッションに返信（解決策）

右側に 26 個の li タグを設定して 26 文字のブランドを配置し、左側の 26 文字に a タグを使用します、href は 26 li タグのインデックスです。
私が言ったことを理解できたかどうかわかりません

効果は lz が言ったことと少し異なりますが、それほど違いはありません。関係のないものは非表示にするだけです

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script type="text/javascript">$(function(){	$(".suoyin  li").click(function(){		var key = $(this).html();		if(key == "全部"){			$(".list li").show();		}else{			$(".list li").hide();			$(".list li[data-key="+key+"]").show();		}	});});</script><style type="text/css">ul,li{margin:0;padding:0;list-style:none;}.box{position:relative;border:1px solid #eee;width:220px;height:350px;overflow-y:scroll;}.suoyin{position:absolute;left:0;top:0;width:20px;height:350px;font-size:12px;line-height:12px;background:#e0e0e0;text-align:center;cursor:pointer;}.suoyin > li:hover{background:#f90;}.list{position:absolute;left:20px;top:0;right:0;width:180px;height:350px;font-size:16px;line-height:20px;}</style><div class="box">	<ul class="suoyin">		<li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li>		<li>H</li><li>I</li><li>K</li><li>J</li><li>L</li><li>M</li><li>N</li>		<li>O</li><li>P</li><li>Q</li><li>R</li><li>S</li><li>T</li>		<li>U</li><li>V</li><li>W</li><li>X</li><li>Y</li><li>Z</li><li>全部</li>	</ul>	<ul class="list">		<li data-key='A'>A 奥迪</li>		<li data-key='A'>A 奥迪</li>		<li data-key='A'>A 奥迪</li>		<li data-key='A'>A 奥蒂斯</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='C'>C 奥迪</li>		<li data-key='C'>C 奥迪</li>		<li data-key='C'>C 奥迪</li>		<li data-key='C'>C 奥迪</li>		<li data-key='D'>D 奥迪</li>		<li data-key='D'>D 奥迪</li>		<li data-key='E'>E 奥迪</li>		<li data-key='F'>F fff</li>		<li data-key='G'>G ggggg</li>	</ul></div>

右側に 26 個の li タグを設定して、これら 26 文字のブランドを置き、左側の 26 文字に a タグを使用します。href は 26 文字のインデックスです。 li タグ、
何を言ったか分かりません

多分意味は分かると思いますが、href のインデックスの書き方を教えていただけますか？

効果は lz が言ったことと少し異なりますが、それほど変わりません。関係のないものを非表示にするだけです

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script><script type="text/javascript">$(function(){	$(".suoyin  li").click(function(){		var key = $(this).html();		if(key == "全部"){			$(".list li").show();		}else{			$(".list li").hide();			$(".list li[data-key="+key+"]").show();		}	});});</script><style type="text/css">ul,li{margin:0;padding:0;list-style:none;}.box{position:relative;border:1px solid #eee;width:220px;height:350px;overflow-y:scroll;}.suoyin{position:absolute;left:0;top:0;width:20px;height:350px;font-size:12px;line-height:12px;background:#e0e0e0;text-align:center;cursor:pointer;}.suoyin > li:hover{background:#f90;}.list{position:absolute;left:20px;top:0;right:0;width:180px;height:350px;font-size:16px;line-height:20px;}</style><div class="box">	<ul class="suoyin">		<li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li>		<li>H</li><li>I</li><li>K</li><li>J</li><li>L</li><li>M</li><li>N</li>		<li>O</li><li>P</li><li>Q</li><li>R</li><li>S</li><li>T</li>		<li>U</li><li>V</li><li>W</li><li>X</li><li>Y</li><li>Z</li><li>全部</li>	</ul>	<ul class="list">		<li data-key='A'>A 奥迪</li>		<li data-key='A'>A 奥迪</li>		<li data-key='A'>A 奥迪</li>		<li data-key='A'>A 奥蒂斯</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='B'>B 保罗</li>		<li data-key='C'>C 奥迪</li>		<li data-key='C'>C 奥迪</li>		<li data-key='C'>C 奥迪</li>		<li data-key='C'>C 奥迪</li>		<li data-key='D'>D 奥迪</li>		<li data-key='D'>D 奥迪</li>		<li data-key='E'>E 奥迪</li>		<li data-key='F'>F fff</li>		<li data-key='G'>G ggggg</li>	</ul></div>

まあ、とても便利です、ありがとう。でも、このエフェクトは既にやっていて、ページのエフェクトがあまり良くないので、別のエフェクトに変更したいです
rreee