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

时间:2013-06-20 05:59:46

标签: html html-form

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

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 *的所有字段同时显示。当我更改下拉列表中的值时,某些字段会根据需要显示。

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

提前感谢。

2 个答案:

答案 0 :(得分:2)

将此条件添加到您的脚本

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/

答案 1 :(得分:1)

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

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

});