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

Posted 2023-02-24

【中文标题】如何在页面加载时隐藏所有表单字段并在从下拉列表中选择时启用

【英文标题】：How to hide all the form fields when page loads and enable when selected from drop-down

【发布时间】：2013-06-20 05:59:45

【问题描述】：

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

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

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

提前致谢。

【问题讨论】：

如果您的下拉菜单不在这两种形式中，只需添加 style="display:none;"两种形式。

【参考方案1】：

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

else if(elem.value == "N")

    document.getElementById("form_o").style.display= "none";
    document.getElementById("form_d").style.display= "none";

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

http://jsfiddle.net/smknQ/

【参考方案2】：

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

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

);