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";

それ以外の：

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 に答える
1 
 document.getElementById("op1").style.display="none";
于 2013-11-07T12:38:51.783 に答える
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 に答える