删除隐藏表单占用的空间

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>

这段代码工作正常.但我的问题是表单只是隐藏所以需要空间即.当我选择不同的选项文本字段出现但由于隐藏的表单有一个空格是有任何选项,我可以删除该空间

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