2007年3月1日木曜日

JavaScriptで連動する2つのセレクトメニューを作る

よく見かけるアレです。例えば不動産系のサイトで、沿線を選択すると駅が選択可能になる、みたいなやつです。

今回はアレをJavaScriptで作ってみました。なお、配列の代わりにJSONを、ライブラリはprototype.jscommon.jsを使ってます。

そして、完成してから気がついたんですが、これってPearのHTML_QuickFormのhierselectを使うと一瞬で作れるんですね。

phpをお使いなら断然そっちを薦めます。自分も結局JavaScriptのはやめてhireselectのにしましたから。。

一応、作ったものをアップしときます。

まだJavaScriptにあまり慣れてないので、かなり手間取ってしまいました。


<html>
<head>
<title>JavaScriptで連動する2つのセレクトメニューを作る</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>

1 件のコメント:

  1. 上記記事を参考に連動プルダウンを作成しました(まだサンプルですが)
    HTML_QuickFormも検討したのですが、HTML(CSS)の保守性を考え、上記のスクリプトの方が利用しやすいかな~とおもったしだいです。
    JavaScriptは私も不得手ですが、おかげでprototype.jsのドキュメントを再度、拝むことができたのでよかったです。

    返信削除