javascript - 如何让一个选择选项显示多个 div？

Question

我有一个案例，用户必须突出显示每个分组中的一个 div。我不知道该怎么说。我在文档中有一个选择。会有很多 div，每个都有自己的信息要显示。我会尽我最大的努力来说明，因为我所做的一切实际上都不起作用。

<select id="teamSelect">
    <option value="1" selected>Red Team</option> 
    <option value="2">White Team</option>
    <option value="3">Blue Team</option>
</select>
<div class="1">
    <p>Red Team's favorite food is pizza.</p>
</div>
<div class="2">
    <p>White Team's favorite food is chocolate.</p>
</div>
<div class="3">
    <p>Blue Team's favorite food is soda.</p>
</div>
<div class="1">
    <p>Red Team's favorite car is Corvette.</p>
</div>
<div class="2">
    <p>White Team's favorite car is Ferrari.</p>
</div>
<div class="3">
    <p>Blue Team's favorite car is Mustang.</p>
</div>

好吧，现在不碍事了。如果选择下拉菜单是选项 1(红队)，则浏览器中将显示以下内容。

Red Teams favorite food is pizza.
Red Teams favorite car is Corvette.

将显示许多其他元素，但所有元素都基于所选的相同选项。我希望我解释得足够好。

我发现有很多方法可以只对一层 div 执行此操作。我使用过 jquery 和 css，但就像我说的那样，在找到的第一个 class="*"之后没有任何效果。我遇到的问题是一遍又一遍地使用相同的 div 类 1，每个分组或主题一次。

Answer 1

如果你想在一个 Div 上显示信息，你需要使用 javascript。

例子:

 <span class="buton" id="buton_texte" onclick="javascript:show_hidden('texte');">show text</span>

和功能:

function show_hidden(id)
{
    if(document.getElementById(id).style.visibility=="hidden")
    {
        document.getElementById(id).style.visibility="visible";
        document.getElementById('bouton_'+id).innerHTML=' hidden';
    }
    else
    {
        document.getElementById(id).style.visibility="hidden";
        document.getElementById('bouton_'+id).innerHTML='show';
    }
    return true;
}