プルダウンに追加項目を加える方法

締切済

質問者：nafufuna
質問日時：2008/12/24 01:02
回答数：2件

過去記事にあった下記のプルダウンを使用させて頂いております。
選択できる項目を「くだもの→りんご→●●」ともうひとつ追加
するにはどうしたらよいのでしょうか？
どうぞよろしくお願いします。

<html>
<head>
<script>

</script>
</head>
<body onLoad="initSel()">
　<form>
　　<p>
　　　メイン：
　　　<select name="selMain" size="1" onChange="changeSel()"></select>
　　</p>
　　<p>
　　　サブ：
　　　<select name="selSub" size="1"></select>
　　</p>
　</form>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： _pipi_
回答日時：2008/12/24 21:40

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>TEST</title>
<body>
<form>
<p>
メイン：
<select name="selMain" size="1" onChange="changeSel()"></select>
</p>
<p>
サブ：
<select name="selSub" size="1" onChange="changeSel2()"></select>
</p>
<p>
さらにサブ：
<select name="selSub2" size="1"></select>
</p>
</form>
</body>

<script type="text/javascript">
var dataMain = [ [ "1", "くだもの"],[ "2", "やさい"],[ "3", "さかな"]];
var dataSub = new Array(
new Array(
new Array("1", "りんご"),
new Array("2", "みかん"),
new Array("3", "いちご")
),
new Array(
new Array("1", "にんじん"),
new Array("2", "だいこん"),
new Array("3", "きゅうり")
),
new Array(
new Array("1", "さば"),
new Array("2", "いわし"),
new Array("3", "さんま")
)
);
var dataSub2 = [
[
[["1", "ふじ"],["2", "むつ"],["3", "つがる"]],
[["1", "夏みかん"],["2", "きんかん"],["3", "ぽんかん"]],
[["1", "栃おとめ"],["2", "くさりかけ"],["3", "白カビつき"]]
],
[
[["1", "１号"],["2", "赤２号"],["3", "やっぱりくさりかけ"]],
[["1", "桜島だいこん"],["2", "かいわれ"],["3", "おでん用"]],
[["1", "漬物用"],["2", "わかんねぇ～"],["3", "あっはっは"]]
],
[
[["1", "缶詰"],["2", "しめ鯖"],["3", "味噌似"]],
[["1", "大きめ"],["2", "ちっちぇ～"],["3", "あぁ～ボキャブラリーない！"]],
[["1", "のまんま"],["2", "からくり"],["3", "・・・。"]]
]
];

var selMain = document.forms[0].elements["selMain"];
var selSub = document.forms[0].elements["selSub"];
var selSub2 = document.forms[0].elements["selSub2"];
selMain.selectedIndex = 0;
setDataToSel(selMain, dataMain);
changeSel();

function changeSel() {
setDataToSel(selSub, dataSub[selMain.selectedIndex]);
setDataToSel(selSub2, dataSub2[selMain.selectedIndex][ selSub.selectedIndex]);
}
function changeSel2() {
setDataToSel(selSub2, dataSub2[selMain.selectedIndex][ selSub.selectedIndex]);
}

function setDataToSel(sel, data) {
var i;
for(i = 0 ; i < sel.options.length ;) sel.options[i++] = null;
for(i = 0 ; i < data.length ; i++) sel.options[i] = new Option(data[i][1], data[i][0]);
}
</script>