WEB相談室

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

タイトル:選択メニューの連動について

0:[投稿] みっちゃん [2003/03/18 10:33 ][環境:win98,ie6 pws,asp]

はじめて投稿します。
「選択メニューの連動」サンプルについての質問です。
どうぞよろしくお願いします。

1.最初に表示されたときにプルダウン2をプルダウン1の1番目に対応したリストを表示する方法は?
サンプルでは、プルダウン1を一旦2番目以降を選択しもう一度1番目を選択しなければなりません。
2.プルダウン1、2で選択されたidではなく、idに対応するデータを別のフォームに引き継ぐ方法は?

javascriptは初心者です。
ご指導よろしくお願いします。


1:[回答] ちゃいぱ [2003/03/18 11:55 ]

以下が、ご希望にそえれば、幸いです。
尚、サンプルとの違いは、コメントに「**」が付いているところです。

<html>
<head>
<title>汎用『選択メニューの連動』</title>
<script type="text/javascript">
//はじめのselect要素の値(値も列数も任意)
var strsel1  = new Array("1","7","8");  

//本例の場合は、1に連動する値(値も列数も任意)
var strsel21 = new Array("26","27","28","29","30");

//本例の場合は、7に連動する値(値も列数も任意)
var strsel22 = new Array("15","16","17","18","19","20");

//本例の場合は、8に連動する値(値も列数も任意)
var strsel23 = new Array("1","2","3","4","5");

function CreateList()//body要素のonLoad属性でコールされる
{
    Create(document.getElementById('lstsel1'), strsel1);
    Create(document.getElementById('lstsel2'), strsel21); //**追加**
}
function CreateList2(myFORM)//strsel1の配列数が増えた分、下3行を対応(カスタマイズ)させる
{
    if(myFORM.lstsel1.options.selectedIndex == 0){ //1が選択されたか
        Create(document.getElementById('lstsel2'), strsel21);
    }
    else if(myFORM.lstsel1.options.selectedIndex == 1){//7が選択されたか
        Create(document.getElementById('lstsel2'), strsel22);    
    }    // 以下の3行をstrsel1の配列の数分用意する。
    else if(myFORM.lstsel1.options.selectedIndex == 2){//8が選択されたか
        Create(document.getElementById('lstsel2'), strsel23);    
    }
}
function Create(objList, objArray)
    //objListは、select要素のオブジェクト
    //objArrayは、select要素へ代入する値の配列
{
    var nMax = objArray.length;//select要素へ代入する値の配列数
    var nLoop = 0;
    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;
}
function test(myFORM) //**追加**
{
myFORM.text1.value=myFORM.lstsel2.options[myFORM.lstsel2.options.selectedIndex].value;
}
</script>
</head>
<body onLoad="CreateList()">
<form>
<select size="1" id="lstsel1" name="lstsel1" onChange="CreateList2(this.form)"></select>
<br>
<select size="1" id="lstsel2" name="lstsel2" onChange="test(this.form)"></select>
<br>
<input type="text" name="text1">
</form>
</body>
</html>


2:[回答] みっちゃん [2003/03/18 18:49 ]

ちゃいぱさん はじめまして!
希望通りでしたどうもありがとうございます。
ただ1つだけ、最初の表示のときプルダウン2の表示幅が
リストデータの文字列の長さで表示されずに、最小幅で表示されてしまいます。
1回プルダウン1を選択すれば幅は広がり、その後は問題有りません。
どうしたら良いのでしょうか?


3:[回答] ちゃいぱ [2003/03/18 19:00 ]

スタイルシートで微調整とか。
<style>
#lstsel2 {width:3em}
</style>


4:[完了] みっちゃん [2003/03/20 14:41 ]

ちゃいぱさん
どうもありがとうございました。

目的達成しました!
今後ともよろしくお願いします。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World