2

ドロップダウンリストからカテゴリを選択すると、テキストボックスを表示/非表示にするこのコードがあります。正常に動作していますが、誰かが別のカテゴリを選択すると、テキスト ボックスが消えるか、別のテキスト ボックスに置き換えられます。例: 食品を選択するとテキスト ボックスが表示され、別のカテゴリを選択すると、ページ全体を更新せずに前のテキスト ボックスが再び非表示になります。ここに私がこれまでに持っているものがあります:

<script language="javascript" type="text/javascript">
    function addSubject(){
        selectedSubject = document.getElementById('category').value
        if (selectedSubject == 'food'){
            document.getElementById('box').style.display = 'block';
        }
    }
</script>
<?
    include ('connect.php');
    $query="SELECT id, name FROM category ";
    $result=mysql_query($query);
?>
<form>
    <select name="category" id="category" onchange="addSubject()">
        <option>Select Category</option>
        <?php while($row=mysql_fetch_array($result)) { ?>
            <option value=<?php echo $row['id']?>><?php echo $row['name']?></option>
        <?php } ?>
    </select>
    <div class="box"  id="box" style="display: none;">
        <div>
            <span>Title :</span><input type="text" name="text" size="8" maxlength="7" />
        </div>
    </div>
</form>

いつものように、事前に感謝します

4

2 に答える 2

1

jqueryなどのライブラリはありますか？もしそうなら、あなたはこのようなことをすることができます:

jQuery('#box').replaceWith('<newelement>')

これについては、こちらのドキュメントを参照してください: http://api.jquery.com/replaceWith/

于 2012-05-25T15:09:55.400 に答える
0

あなたの問題を正しく理解していれば、次のような関数を使用できます。

// Expects your SELECT element as EL
function addSubject( el ){
    // Gets current selected value, as well as all DIVs
    var newValu = el.value,
        kiddies = document.getElementById("options").childNodes,
        klength = kiddies.length, curNode;
    // Counts through all childNodes of the DIV container
    while ( klength-- ) {
      curNode = kiddies[klength];
      // If the current node is a DIV (avoid text nodes )
      if( curNode.nodeName == "DIV" )
        // If the current node id equals our selected value, show the node
        curNode.style.display = curNode.id == newValu ? "block" : "none" ;
    }
}

divこれには、要素をコンテナーにラップthisし、onchange関数呼び出しに渡す必要があります。

<select onchange="addSubject(this)">
    <option>Box</option>
    <option>Food</option>
    <option>Stack</option>
</select>
<div id="options">
    <div id="Box">Box: <input type="text" /></div>
    <div id="Food">Food: <input type="text" /></div>
    <div id="Stack">Stack: <input type="text" /></div>
</div>​

デモ: http://jsfiddle.net/8nFCB/

于 2012-05-25T15:40:41.220 に答える