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

Question

我在 div 中有一个下拉菜单。当我从下拉菜单中选择不同的选项时，我需要根据选择的值显示不同的 div。当我显示一个 div 时，我隐藏了其他 div。但我在隐藏 div 的位置得到了空白。如何始终将可见 div 移动到下拉列表下方？

提前致谢...

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