Question

我想从列表中选择 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>

相关的javascript函数是：

<script> function myFunction() {
    document.getElementById("op1").style.visibility="hidden";
}
</script>

我也尝试使用按钮做同样的事情。当我将onClick功能应用于按钮时，它可以正常工作。有人可以告诉我出错的地方或我应该使用哪个功能列表。

Answer 1

您已将事件处理程序放在onclick元素的<option>属性中。这可能不会按预期工作。而是将onchange事件处理程序添加到其父<select>元素，如下所示：

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

Answer 2

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

Answer 3

应该是：

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

而不是：

document.getElementById("op1").style.visibility="hidden";

Answer 4

对于类似于你的列表，需要在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>

然后你的js代码就像，

function myFunction()
{
    if(document.getElementById("parent_id").value=="item2"){
document.getElementById("op1").style.visibility="hidden";
    }else{
        document.getElementById("op1").style.visibility="visible";
    }
}

实施例， http://jsfiddle.net/5E8AH/

此外， display：block 和 visibility：hidden 之间的区别在于后者会隐藏内容，但仍然会将空间视为可见。

Answer 5

试试这个，

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

Answer 6

使用这个：

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

或

document.getElementById("id").style.visibility = "hidden";

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

6 个答案: