移除隐藏表单占用的空间

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>

这段代码很好用。但是我的问题是，表单只是隐藏了，所以它占据空间，也就是说，当我选择不同的选项时，文本字段会出现，但由于隐藏的表单存在，会留下一些空间，有没有办法可以去掉这个空间呢？

- George

---

尝试减少代码大小，不要复制相同的行两次，因为在客户端大小确实很重要。 - bugwheels94

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

- SeanWM

Answer 2

如果你只有两个选项元素要处理，并且不打算扩展，那么可以。但是，如果出于某种原因你计划扩展选项并且只想保持代码简洁清晰，你可以跟踪$(this)的选定值...

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>

这是我的fiddle，可以展示它的运行情况

- klewis