html - 如何在页面加载时隐藏所有表单字段并在从下拉列表中选择时启用

Question

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

.html 文件

<select id="topic_type" onchange="func_type()">
<option id="n" selected>N</option>
<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.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";
}
}
</script>

在这种情况下，当我加载页面时，默认值为n，并且 *form_d* 和 *form_o* 的所有字段同时显示。当我更改下拉列表中的值时，某些字段根据需要可见。

我的问题是加载页面时我希望隐藏所有表单字段。我该怎么做

提前致谢。

Answer 1

将此条件添加到您的脚本中

else if(elem.value == "N")
{
    document.getElementById("form_o").style.display= "none";
    document.getElementById("form_d").style.display= "none";
}

并在结束标签func_type()之前调用</script>

http://jsfiddle.net/smknQ/

Answer 2

You can hide the required elements on jQuery document ready function.

$(document).ready(function(){
   $("#idoftheelement").hide();

});