gpt4 book ai didi

javascript - 显示与类同名的 id 元素

转载 作者:行者123 更新时间:2023-12-02 16:02:33 25 4
gpt4 key购买 nike

<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>

关于javascript - 显示与类同名的 id 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31059659/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com