Html 删除隐藏窗体占用的空间

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

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>

D
O
函数func_type（）
{
var elem=document.getElementById（“主题类型”）；
如果（元素值=“D”）
{
document.getElementById（“form_d”）.style.visibility=“visible”；
document.getElementById（“form_o”）.style.visibility=“hidden”；
} 
else if（元素值==“O”）
{
document.getElementById（“form_o”）.style.visibility=“visible”；
document.getElementById（“form_d”）.style.visibility=“hidden”；
}
}

---

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

请尝试使用

显示

，而不是

可见性

：

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（）

：

---

如果你只需要处理2个选项元素，并且计划永远不要扩展它，那么就可以了。但是，如果出于某种原因，您计划扩展您的选项，并且只想保持代码的简短和干净，那么您可以跟踪所选的$值（此）

jQuery：

function package() {
    $('#topic_type').on("change",function() {
      mthissel =  $(this).find("option:selected");
      mthissel.css({display:'block'}); //or 'none'
      $(this).find('option:not(:selected)').css({display:'none'});  //or 'block' dependent on your preference :)
    });
}

$(function() {
  package();
});

HTML：

<select id="topic_type">
    <option id="d">D</option>
    <option id="o">O</option>
    <!--go ahead and add more <option values here-->
</select>

D
O

---

我希望在实际操作中显示它

尽量减少代码大小，不要将同一行复制两次，因为大小在客户端非常重要

<select id="topic_type">
    <option id="d">D</option>
    <option id="o">O</option>
    <!--go ahead and add more <option values here-->
</select>