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

公開日: : 未分類

Pocket

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

修正した点は

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

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

<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,'load',init,false);

function init()
{
  addEvent($("form1").country, 'change', 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>

関連記事

記事はありませんでした

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


PAGE TOP ↑