4

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

.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>

这段代码工作正常。但我的问题是表单只是隐藏的，所以它占用了空间，即。当我选择不同的选项时，文本字段会出现，但由于隐藏的形式有一个空格，是否有任何选项可以删除该空格

4

2 回答 2

6

尝试使用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()and .hide()：

if(elem.value == "D") {
    $("#form_d").show();
    $("#form_o").hide(); 
} else if(elem.value == "O") {
    $("#form_o").show();
    $("#form_d").hide();
}
于 2013-06-19T19:14:56.410 回答
0

如果您只有 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>

我的小提琴在行动中展示它

于 2013-06-19T19:51:39.047 回答