0

チェックボックスとドロップダウンリストのリストがあります。チェックボックスをオンにすると、要素をドロップダウンリストに動的に追加できました。

特定のチェックボックスをオフにすると、対応する項目をドロップダウン リストから動的に削除するにはどうすればよいですか。

これが私のコードです

//<input type="checkbox" name="docCkBox" value="${document.documentName}" onclick="handleChange(this)"/>
// check box onclick event will call this function
   function handleChange(cb) {
         if (cb.checked)
    {

        // Create an Option object
        var opt = document.createElement("option");

        // Add an Option object to Drop Down/List Box
        document.getElementById("query_doc").options.add(opt);

        // Assign text and value to Option object
        opt.text = cb.value;
        opt.value = cb.value;


    }

    else{


//I want to remove a particuler Item when I uncheck the check-box
//by below method it will always remove the first element of the dropdown but not the corresponding element

 var opt = document.createElement("option");
 opt.text = cb.value;
 opt.value = cb.value;
 document.getElementById("query_doc").remove(opt);

 }


    }
4

2 に答える 2

1

目的のオプションのインデックスを見つけて、インデックスごとに削除する必要があります。

于 2012-07-18T17:45:45.363 に答える
1

新しいオプションを作成するのではなく、選択タグに既にあるオプションにアクセスする必要があります。これを行うには、すべてのオプションを取得してから、各オプションをチェックして、チェックボックスの値があるかどうかを確認します。コードは、else ブロック内で次のようになります。

var opts = document.getElementById("query_doc").getElementsByTagName('option');
for(var i = 0; i < opts.length; i++){
    if(opts[i].value == cb.value){
        opts[i].parentNode.removeChild(opts[i]);
    }
}

私はコードをテストしていませんが、一般的な考え方はそこにあります。

于 2012-07-18T17:46:48.000 に答える