Question

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

提前致谢...

Answer 1

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

将可见的divs'移动到隐藏的divs'位置

1 个答案: