![](/img/trans.png)
[英]Get ID name of a clicked element and show divs with the same name of class
[英]Show id element that has same name as class
<style>
#africa,#bahrain,#oman{
display:none
}
</style>
<select class="country">
<option class="africa" value="africa">Africa</option>
<option class="bahrain" value="bahrain">Bahrain</option>
<option class="oman" value="oman">Oman</option>
</select>
<div class="countryDetails">
<div id="africa"><h1>Africa details</h1></div>
<div id="bahrain"><h1>Bahrain details</h1></div>
<div id="oman"><h1>Oman details</h1></div>
</div>
如果我从下拉列表中选择一个国家/地区,该如何显示该国家/地区的详细信息?
列表项的class
与详细信息具有相同的名称,期望详细信息是ID。
该列表将继续增长,因此需要动态。
这是一个解决方案
var t=$('.country').val(); $('#'+t).show(); $('.country').on('change',function(){ t=$('.country').val(); $('.countryDetails').children().hide(); $('#'+t).show(); });
#africa,#bahrain,#oman{ display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="country"> <option class="africa" value="africa">Africa</option> <option class="bahrain" value="bahrain">Bahrain</option> <option class="oman" value="oman">Oman</option> </select> <div class="countryDetails"> <div id="africa"><h1>Africa details</h1></div> <div id="bahrain"><h1>Bahrain details</h1></div> <div id="oman"><h1>Oman details</h1></div> </div>
这会做到的
$('select').on('change',function(){
$('.countryDetails').children().hide();
$('#' + this.value).fadeIn('slow');
});
如果您尚未将jQuery包含到您的项目中,那么最好使用纯JavaScript,因为您不需要为此加载整个jQuery库。
您可以改用以下方法:
var det = document.querySelectorAll('.countryDetails div');
var val = document.getElementById('country');
val.addEventListener('change',function(){
for (var i = 0; i< det.length;i++){
det[i].id != val.value ? det[i].style.display = 'none' : det[i].style.display = 'block';
}
});
请注意我在html中为您所在的国家/地区添加的ID选择
<select class="country" id="country">
<option class="africa" value="africa">Africa</option>
<option class="bahrain" value="bahrain">Bahrain</option>
<option class="oman" value="oman">Oman</option>
</select>
<div class="countryDetails">
<div id="africa"><h1>Africa details</h1></div>
<div id="bahrain"><h1>Bahrain details</h1></div>
<div id="oman"><h1>Oman details</h1></div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.