将可见div移动到隐藏div的位置

Question

我在div中有一个下拉菜单。当我从下拉菜单中选择不同的选项时，我需要根据所选值显示不同的div。我在展示div时隐藏了其他div。但我正在隐藏divs的空间。我怎样才能将可见的div总是移动到下面的immediatley？

在此先感谢...

Answer 1

DEMO

JQUERY：

$(document).ready(function(){ 
$('#drop').change(function() { 
     if ($('#drop option:selected').text() == "Volvo"){ 
      $('div').hide(); 
      $('#volvo').show(); 
     } else if ($('#drop option:selected').text() == "Mercedes"){ 
      $('div').hide(); 
      $('#mercedes').show(); 
     } else if ($('#drop option:selected').text() == "Audi"){ 
      $('div').hide(); 
      $('#audi').show(); 
     } else { 
      $('div').hide(); 
     } }); 
}); 

HTML：

<select id="drop"> 
    <option value="">--select--</option> 
    <option value="volvo">Volvo</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 
<div id="volvo">u have selected volvo</div> 
<div id="mercedes">u have selected mercedes</div> 
<div id="audi">u have selected audi</div> 

CSS：

div{display:none; 
width:40%; 
background-color:#EBFFC2; 
border-radius:5px;}