html - 去除隐藏表格占用的空间

Question

我试图在从组合框选项中选择不同的值时显示一个文本字段。

html文件

<select id="topic_type" onchange="func_type()">
    <option id="d"> D</option>
    <option id="o">O</option>
</select>

<script type="text/javascript">
function func_type() 
{
    var elem = document.getElementById("topic_type");

    if(elem.value == "D") 
    {
        document.getElementById("form_d").style.visibility = "visible";
        document.getElementById("form_o").style.visibility = "hidden"; 
    } 
    else if(elem.value == "O")
    {
        document.getElementById("form_o").style.visibility = "visible";
        document.getElementById("form_d").style.visibility = "hidden";
    }
}
</script>

这段代码运行良好。但我的问题是 form 只是隐藏的，所以它占用了空间。当我选择不同的选项时出现文本字段但是由于隐藏的表单有一个空格是否有任何选项可以删除那个空格

Answer 1

尝试使用 display 而不是 visibility :

if(elem.value == "D") {
    document.getElementById("form_d").style.display = 'block';
    document.getElementById("form_o").style.display = 'none'; 
} else if(elem.value == "O") {
    document.getElementById("form_o").style.display = 'block';
    document.getElementById("form_d").style.display = 'none';
}

或者如果您有兴趣使用 jQuery，您可以使用 .show() 和 .hide():

if(elem.value == "D") {
    $("#form_d").show();
    $("#form_o").hide(); 
} else if(elem.value == "O") {
    $("#form_o").show();
    $("#form_d").hide();
}