今回はアレをJavaScriptで作ってみました。なお、配列の代わりにJSONを、ライブラリはprototype.jsとcommon.jsを使ってます。
そして、完成してから気がついたんですが、これってPearのHTML_QuickFormのhierselectを使うと一瞬で作れるんですね。
phpをお使いなら断然そっちを薦めます。自分も結局JavaScriptのはやめてhireselectのにしましたから。。
一応、作ったものをアップしときます。
まだJavaScriptにあまり慣れてないので、かなり手間取ってしまいました。
<html>
<head>
<title>JavaScriptで連動する２つのセレクトメニューを作る</title>
<script type="text/javascript" src="common/prototype.js"></script>
<script type="text/javascript" src="common/common10.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,'load',init,false);
function init()
{
addEvent($("form1").country, 'change', setMenuItem, false);
}
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">
<select name="country">
<option value="1">日本</option>
<option value="4">アメリカ</option>
<option value="8">イギリス</option>
</select>
<select name="city">
</select>
</form>
</body>
</html>
上記記事を参考に連動プルダウンを作成しました（まだサンプルですが）
返信削除HTML_QuickFormも検討したのですが、HTML(CSS)の保守性を考え、上記のスクリプトの方が利用しやすいかな～とおもったしだいです。
JavaScriptは私も不得手ですが、おかげでprototype.jsのドキュメントを再度、拝むことができたのでよかったです。