目次

オブジェクトなJavaScriptの基礎講座

選択メニューの連動

◆ はじめに

WEB相談室の『プルダウン1とプルダウン2の連動』に影響されて、俗にいう『選択メニューの連動』を汎用的にDOMで組んでみました。DOMの雰囲気を味わってください。

要は、一つ目のプルダウンメニューのどれかの値を選択すると、それに関連するリストを2つ目のプルダウンメニューに表示させるものです。

◆ サンプルソース

<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 selectedout(myFORM)
{
    myFORM.text1.value=myFORM.lstsel2.options[myFORM.lstsel2.options.selectedIndex].value;
}
</script> 
</head> 
<body onLoad="CreateList()"> 
<form> 
<p> 
<select size="1" id="lstsel1" name="lstsel1" onChange="CreateList2(this.form)"></select> 
<br>
<select size="1" id="lstsel2" name="lstsel2" onChange="selectedout(this.form)"></select> 
<br>
<input type="text" name="text1">
</p> 
</form> 
</body>
</html>
参考

createElement(), childNodes(), appendChild(), setAttribute(), createTextNode()等は以下を参照のこと。

補足

2つ目のプルダウンメニューで選択された値は、myFORM.lstsel2.options[myFORM.lstsel2.options.selectedIndex].value に格納されます。この値が、本機能の最終出力データとなります。

◆ サンプルの実行



◆ 本サンプルをカスタマイズするときのポイント

一つ目のプルダウンメニューのリストの値を増やしたい場合、以下のようにします。(例えば 9 を追加)

var strsel1  = new Array("1","7","8"); 

var strsel1  = new Array("1","7","8","9"); 

つぎに、以下の行を追加します。

var strsel24 = new Array("9","9","9"); //尚、配列数と値は任意

そして、CreateList2関数の最後に以下の3行を追加する。

    else if(myFORM.lstsel1.options.selectedIndex == 3){//9が選択されたか
        Create(document.getElementById('lstsel2'), strsel24);     
    } 

以上です。

全体的には以下のようになります。強調されているところが今回カスタマイズされたところです。

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

//本例の場合は、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"); 

var strsel24 = new Array("9","9","9","9"); 

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);     
    } 
    else if(myFORM.lstsel1.options.selectedIndex == 3){//9が選択されたか
        Create(document.getElementById('lstsel2'), strsel24);     
    } 
} 
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 selectedout(myFORM)
{
    myFORM.text1.value=myFORM.lstsel2.options[myFORM.lstsel2.options.selectedIndex].value;
}
</script> 
</head> 
<body onLoad="CreateList()"> 
<form> 
<p> 
<select size="1" id="lstsel1" name="lstsel1" onChange="CreateList2(this.form)"></select>
<br> 
<select size="1" id="lstsel2" name="lstsel2" onChange="selectedout(this.form)"></select> 
<br> 
<input type="text" name="text1">
</p> 
</form> 
</body>
</html>

目次