0

当我从列表中选择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功能应用于按钮时，它可以正常工作。有人可以告诉我哪里出错了，或者我应该为列表使用哪个函数。

4

6 回答 6

3

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

<select name="parent_id" ... onchange="document.getElementById('op1').style.visibility=(this.selectedIndex==2)?'hidden':'visible';">
于 2013-11-07T12:45:56.247 回答
1 
 document.getElementById("op1").style.display="none";
于 2013-11-07T12:38:51.783 回答
1

它应该是：

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

代替：

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

于 2013-11-07T12:39:02.257 回答
1

对于您拥有的列表，需要在选择元素上添加事件处理。

    <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之间的区别在于后者会隐藏内容，但仍会占用空间，就好像它是可见的一样。

于 2013-11-07T12:50:11.153 回答
0

试试这个，

document.getElementById("op1").style.display="none";
于 2013-11-07T12:40:50.167 回答
0

使用这个：

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

或者

document.getElementById("id").style.visibility = "hidden";
于 2013-11-07T12:42:48.540 回答