WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:「選択メニューの連動(DOM利用)」について

0:[投稿] DOM初心者 [2004/01/20 17:09 ][環境:win2k,IE6 Apache]

質問があります!
このwebサイトにある「7. 応用」の「選択メニューの連動(DOM利用)」のプログラムのところなんですが、
function Create(objList, objArray)で、

if(objList.childNodes[nLoop]  != undefined)
objList.removeChild(objList.childNodes[nLoop]);

if(objList.childNodes[nLoop].firstChild  != undefined)
objList.childNodes[nLoop].removeChild(objList.childNodes[nLoop].firstChild);

で、option要素とそのテキスト要素を削除していますよねー。
これは、lstsel2のプルダウンメニューを2回以上変更したときに、すでに要素として加えられていたoption要素とそのテキスト要素を削除しているのだと思いますが、このプログラムだと、nLoopの回数しか削除しないように思うのですが...
つまりこの例でいくとlstsel1のメニューで"7"(要素数6)を選んだあと"8"(要素数5)を選ぶと、objList.childNodes[6]のoption要素とそのテキスト要素が残ってしまうような気がするんですが...残っても問題ないですか?
それとも何かの命令を実行したときに自動的に消えるのでしょうか?
以上のことについてできればこのプログラムの流れにそってアドバイスをお願いします。


1:[回答] [2004/01/20 18:01 ]

//連動する方のselect要素の個数を設定する
objList.length=nLoop;

HTMLOptionsCollection の length は、
NodeList や HTMLCollection の length とは違い readOnly ではなく
値を上書きすることでサイズを設定することができます。


2:[質問] DOM初心者 [2004/01/21 08:56 ]

早速のご回答ありがとうございます!
回答の内容を見る限りでは、
objList.length=nLoop;
で、プルダウンメニューの要素の個数を設定しているということですよね。
では
if(objList.childNodes[nLoop]  != undefined)
objList.removeChild(objList.childNodes[nLoop]);
でoption要素を削除する必要がないような気がするのですが...
この命令の必要性について教えてください。
よろしくお願いします。


3:[回答] ROM-X [2004/01/21 13:10 ]

上記を踏まえて、以下の感じで、どうでしょうか。

function Create(objList, objArray)
    //objListは、select要素のオブジェクト
    //objArrayは、select要素へ代入する値の配列
{
    var nMax = objArray.length;//select要素へ代入する値の配列数
    var nLoop = 0;

    objList.length=nLoop;// 追加

    for (nLoop = 0; nLoop < nMax; nLoop++){
        //option要素を作成
        oAdd = document.createElement('option');

        //option要素を親要素に追加する前にすでに子要素があるときはそれを削除
//        if(objList.childNodes[nLoop]  != undefined)
//            objList.removeChild(objList.childNodes[nLoop]);

        //option要素を親要素(select)へ追加
        objList.appendChild(oAdd);

        //option要素のvalue属性にインデックスの値を設定
        objList.childNodes[nLoop].setAttribute('value',objArray[nLoop]);

        //option要素の子要素にobjArray配列の値をテキストとして作成
        oAddx= document.createTextNode(objArray[nLoop]);

        //すでに子要素があるときはそれを削除
//        if(objList.childNodes[nLoop].firstChild  != undefined)
//            objList.childNodes[nLoop].removeChild(objList.childNodes[nLoop].firstChild);

        //作成したテキストを親要素(option)へ追加
        objList.childNodes[nLoop].appendChild(oAddx);
    }
    //連動する方のselect要素の個数を設定する
//    objList.length=nLoop;
}


4:[完了] DOM初心者 [2004/01/21 17:13 ]

ROM-Xさん、早々のご回答ありがとうございます!
なるほど、最初の
objList.length=nLoop;// 追加
のところでobjList.lengthに0を代入することで、
option要素をすべて削除しているわけですね。
(だから、後々の削除する命令はいらなくなる、ということですね)
これで、このソースに対する疑問が解決しました。
早速この手法を利用させていただきます。
本当にありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World