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

Answer 2

如果您只有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将其展示在行动中

删除隐藏表单占用的空间

2 个答案: