Javascript 显示与类同名的id元素

如果我从下拉列表中选择一个国家，我将如何创建一个函数来显示该国家的详细信息

列表项的类与详细信息具有相同的名称，但详细信息是一个ID

列表将继续增长，因此它需要是动态的。

这里有一个解决方案

var t=$'.country'.val； $+t.show； $'.country'。关于“更改”，函数{ t=$'.country'.val； $'.countryDetails'.children.hide； $+t.show； }; 非洲、巴林、阿曼{ 显示：无 } 非洲 巴林 阿曼 非洲细节 巴林详情 阿曼细节 这就行了

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

如果您还没有将jQuery包含到项目中，那么最好使用纯javascript，因为您不需要为此加载整个jQuery库

您可以改为使用此选项：

$('select').on('change',function(){
    $('.countryDetails').children().hide();
    $('#' + this.value).fadeIn('slow');
});

注意我在html中为您的国家/地区选择添加的id

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';
    }
});

---

你试过这么做吗？

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