如何让select-option显示多个div？

Question

我有一种情况，用户必须在每个分组中突出显示一个div。我不知道该怎么说。我在文档中有一个选择。将有许多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，但就像我说的那样，找到的第一个类=“*”之后没有任何作用。我遇到的问题是反复使用相同的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;
}

Answer 2

Working Demo

Jquery的

   var flag='false';
if(flag==='false'){
var selected    = $("#teamSelect option:selected").val() ;
  $('div').each(function(){

        var cla =$(this).attr("class");
        if(selected=='1'&&cla==='one'){

            $(this).css({display:"block"  });      

        }else
             if(selected=='2'&&cla==='two'){

            $(this).css({display:"block"  });      

        }else
             if(selected=='3'&&cla==='three'){

            $(this).css({display:"block"  });      

             }else{
               $(this).css({display:"none"  });      

             }


    });

}

$("#teamSelect").change(function() {
var selected="";
var flag='true';
 selected    = $("#teamSelect option:selected").val() ;

    $('div').each(function(){

        var cla =$(this).attr("class");
        if(selected=='1'&&cla==='one'){

            $(this).css({display:"block"  });      

        }else
             if(selected=='2'&&cla==='two'){

            $(this).css({display:"block"  });      

        }else
             if(selected=='3'&&cla==='three'){

            $(this).css({display:"block"  });      

             }else{
               $(this).css({display:"none"  });      

             }


    });

});

HTML

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

CSS

.one, .two, .three {
    display:none;
}

编辑Demo with value for default case

---