改造の要点としては
１．３次元配列が必要です。
２．Select1の選択状態とSelect2の選択状態との２つのデータを関数に送る必要があります。
３連動を並列に２つ並べるとか、ほかのページにも使うとかを考えると、３つのidを引数で送る方が汎用性が高くなります。
ということで、selectタグにidも振ることとします。
３．Select1のonchange でも、変更したSelect2の状態によって、Select3を書き換える必要がある。
あとのは、蛇足ですけど
４．options[i]=null; はMac版 Netscape7.0(OS 8/9用)で動作しないと云う情報を他のサイトの掲示板で見たことがあります。
http://www.gac.jp/article/index.php?stats=question&id=16732&command=msg
配列の要素を削除する方法として、lengthに0を代入という方法を、こちらでつい最近見かけたので、これを採用。
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=422
５．new Option() 一行で済むのは魅力的だけど。。。
createElement()を使ってユーティリティ関数を作ってみました
以下３連動用JavaScript
menuItem1 = [["あそぶ","昼寝"],["ショッピング","ランチ","デート"]];
menuItem3 = [[["バドミントン", "人生ゲーム", "トランプ"],
["いびき", "寝言"] ],
[["服", "バッグ", "化粧品"],
["ファーストフード", "和食"],
["映画","遊園地"] ]
];
// １番目変更による ２番目のリスト切り替え
// @param select1_id : 連動元 select id 最初のリスト
// @param set2_id : 連動変更先 select id ２番目のリスト
// @param set3_id : 連動変更先 select id
function list_set2(select1_id, set2_id, set3_id){
if(! document.getElementById) return;
var n1 = document.getElementById(select1_id).selectedIndex;
add_list( set2_id, menuItem1[n1] );
var n2 = 0;
add_list( set3_id, menuItem3[n1][n2] );
}
// 連動optionオブジェクト 切り替え, data array 利用 （３連動→３次元配列）
// ２番目変更による ３番目のリスト切り替え
// @param select1_id : 連動元 select id 最初のリスト
// @param select2_id : 連動元 select id ２番目のリスト
// @param set3_id : 連動変更先 select id
function list_set3(select1_id,select2_id, set3_id){
if(! document.getElementById) return;
var n1 = document.getElementById(select1_id).selectedIndex;
var n2 = document.getElementById(select2_id).selectedIndex;
add_list( set3_id, menuItem3[n1][n2] );
}
// select optionとして 配列の要素を追加
// @param set_id : 変更先 select id
// @param list : 配列オブジェクト
function add_list( set_id, list ){
if(! document.getElementById) return;
var sel_obj = document.getElementById(set_id);
sel_obj.options.length = 0; // 配列の要素全削除はこれでもいける
var ll = list.length;
for (i=0; i<ll; i++){
opt_add(sel_obj, list[i]);
}
sel_obj.size = ll ;// 全行表示 ドロップダウンにするならllを1に変更
sel_obj.selectedIndex = 0;
}
// select object に option追加
// @param sel_obj : select object
// @param opt_v : option value, text
function opt_add(sel_obj,opt_v){
if(! document.createElement) return null;
var opt_obj = document.createElement("OPTION");
opt_obj.value = opt_v;
opt_obj.appendChild( document.createTextNode(opt_v) );
sel_obj.appendChild(opt_obj);
}
select タグの記述はこんな感じ
<select name="s1_rendou" id="s1_rendou" onchange="list_set2(this.id, 's2_rendou', 's3_rendou')" >
<select name="s2_rendou" id="s2_rendou" onchange="list_set3('s1_rendou', this.id, 's3_rendou')" >
<select name="s3_rendou" id="s3_rendou" >
