Javascript 如何在js中隐藏文本字段？

当我从列表中选择from item2时，我想隐藏文本字段。以下是我的代码的相关部分：

<div class="control-group">
    <label class="control-label">Select Parent</label>
    <div class="controls">
        <select name="parent_id" class="span6 m-wrap" data-placeholder="Choose a Parent" tabindex="1">
            <option value="0" >Select Parent</option>
            <?php
                $admin_sql=mysql_query("select * from admin_detail where parent_id='0' and role='2'");
                while($Fetch_Admin=mysql_fetch_array($admin_sql)) {
            ?>
            <option value="<?php echo $Fetch_Admin['id']; ?>" onClick = "myFunction()"  > <?php echo $Fetch_Admin['name'] ;?> </option>
            <?php } ?>
        </select>
    </div>
</div>

<div class="control-group">
    <label class="control-label">Name</label>
    <div class="controls">
        <input type="text" name="name" class="span6 m-wrap"  placeholder="Name" required/>
    </div>
</div>

<div class="control-group">
    <label class="control-label">Login ID</label>
    <div class="controls">
        <input type="text" name="login" class="span6 m-wrap"   placeholder="Login ID" required/>
    </div>
</div>

<div class="control-group">
    <label class="control-label">Password</label>
    <div class="controls">
        <input type="password" name="password" class="span6 m-wrap"   placeholder="Password" required/>
    </div>
</div>

<div class="control-group" id="op1">
    <label class="control-label" >Add Options</label>
    <div class="controls">
        <input type="text"  name="option1"  class="span6 m-wrap"  placeholder="Option1" required/>
        <input type="text"  name="option2"  class="span6 m-wrap"  placeholder="Option2" required/>
        <input type="text"  name="option3"  class="span6 m-wrap"  placeholder="Option3" required/>
        <input type="text"  name="option4"  class="span6 m-wrap"  placeholder="Option4" required/>
        <input type="text"  name="option5"  class="span6 m-wrap"  placeholder="Option5" required/>
    </div>
</div>

选择父项
选择父项
应该是：

document.getElementById（“op1”）.style.display=“无”

而不是：

document.getElementById（“op1”）.style.visibility=“hidden”
应该是：

document.getElementById（“op1”）.style.display=“无”

而不是：

document.getElementById（“op1”）.style.visibility=“hidden”
试试这个

document.getElementById("op1").style.display="none";

试试这个

document.getElementById("op1").style.display="none";

使用这个：

document.getElementById("id").style.display = "none";

或

使用这个：

document.getElementById("id").style.display = "none";

或

您已将事件处理程序放置在
元素的
onclick
属性中。这可能不会像预期的那样起作用。相反，将
onchange
事件处理程序添加到其父元素
中，如下所示：

<select name="parent_id" ... onchange="document.getElementById('op1').style.visibility=(this.selectedIndex==2)?'hidden':'visible';">

您已将事件处理程序放置在
元素的
onclick
属性中。这可能不会像预期的那样起作用。相反，将
onchange
事件处理程序添加到其父元素
中，如下所示：

<select name="parent_id" ... onchange="document.getElementById('op1').style.visibility=(this.selectedIndex==2)?'hidden':'visible';">

对于类似您拥有的列表，需要在select元素上添加事件处理

    <select name="parent_id" id="parent_id" class="span6 m-wrap" data-placeholder="Choose a Parent" tabindex="1" onchange="myFunction()">
  <option value="0" >Select Parent</option>
  <option value="item2" > item2 </option>
    </select>

例如，

另外，display:block和visibility:hidden之间的区别在于后者将隐藏内容，但仍会占用空间，就好像它是可见的一样。
对于类似您拥有的列表，需要在select元素上添加事件处理

    <select name="parent_id" id="parent_id" class="span6 m-wrap" data-placeholder="Choose a Parent" tabindex="1" onchange="myFunction()">
  <option value="0" >Select Parent</option>
  <option value="item2" > item2 </option>
    </select>

例如，

另外，display:block和visibility:hidden之间的区别在于后者将隐藏内容，但仍会占用空间，就像它是可见的一样。
visibility hidden是一个有效的CSS属性。它只是使事物不可见，但保持其在布局中的位置。可见性隐藏是一个有效的CSS属性。它只是使东西不可见，但在布局中保持其位置。javascript区分大小写。请使用适当的camelcasejavascript区分大小写。当您单击声明它的特定选项时，请使用适当的camelcaseonclick应该可以工作。我看不出它不工作的任何原因。假设您导航到
元素，按tab键并使用向上/向下/输入键更改其值。那么，
onclick
处理程序会做什么呢？这是一个例外情况，但作为一个程序员，我们应该为最坏的情况做好准备。所以这一点+1。当您单击声明它的特定选项时，onclick应该可以工作。我看不出它不工作的任何原因。假设您导航到
元素按tab键并使用向上/向下/输入键更改其值。那么，
onclick
处理程序会做什么呢？这是一个例外情况，但作为一个程序员，我们应该为最坏的情况做好准备。因此，这一点需要+1。