JavaScriptでセレクトボックスの連動

Posted by joeartsea on 2009-03-05

JavaScriptで連動する2つのセレクトボックス(セレクトメニュー?)が必要になっていろいろ見たんですが、コードの量、シンプルさからJavaScriptで連動する2つのセレクトメニューを作るを参考にさせていただきました。ただ、このコード間違いが多くてそのままでは動きません。コメントもしたんですが承認いただけないようなのでこちらに書いておきます。

修正した点は

  • form1, country, cityはname属性だけではなくid属性も追加
  • デフォルトの都市名が表示されない
  • その他タイプミスが幾つかありましたが今は修正されている模様

以下が修正したコードです。動作確認済みです。そのまま動きます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<html>
<head>
<title>JavaScriptで連動する2つのセレクトメニューを作る</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<script type="text/javascript">
<!--
var menuItem = {
1: [
{"code": 1, "name": "東京"},
{"code": 2, "name": "大阪"},
{"code": 3, "name": "名古屋"}
]
,
4: [
{"code": 5, "name": "ニューヨーク"},
{"code": 6, "name": "ワシントン"},
{"code": 7, "name": "ロス"}
]
,
8: [
{"code": 8, "name": "ロンドン"},
{"code": 8, "name": "マンチェスター"},
{"code": 9, "name": "リヴァプール"}
]
};
addEvent(window,&#39;load&#39;,init,false);
function init()
{
addEvent($("form1").country, &#39;change&#39;, setMenuItem, false);
setMenuItem();
}
function setMenuItem()
{
//初期化
var option_cnt = $("form1").city.options.length;
for(var i=0; i<option_cnt; i++)
{
$("form1").city.remove(0);
}
var n = $F("country");
for(var i=0; i<menuItem[n].length; i++)
{
$("form1").city.options[i] = new Option(menuItem[n][i]["name"],menuItem[n][i]["code"]);
}
}
-->
</script>
<form name="form1" id="form1">
<select name="country" id="country">
<option value="1">日本</option>
<option value="4">アメリカ</option>
<option value="8">イギリス</option>
</select>
<select name="city" id="city">
</select>
</form>
</body>
</html>