[JavaScript] jQueryでプルダウンを動的に変更する

jQueryでラジオボタンを押した際に、動的にプルダウンが変わるというコードのサンプルです。

jQueryでプルダウンを動的に変更（サンプル）

フォームのCMSを開発する際によくあるケースですが、
選択されている親カテゴリによって、子カテゴリのプルダウンの項目を動的に変更したいときがあります。

こういう場合、jQueryでは以下のように書けます。

$("#team input[type=radio]").click(function(){
  var $pulldown = $("#pulldown");
  $pulldown.empty();
  $option_entries = new Array();
  $.each(team[this.id],function(i){
    $option_entries.push('<option value="' + i + '">' + this + '</option>');
  });
  $pulldown.append($option_entries.join());
});

本来は Optionオブジェクトを追加するような形で

$pulldown.append(new Option(html,value) );

という形が分かりやすいのですが、IE上では動作しません。

ですので、一旦 optionのHTMLを配列として受け取り
それを1つの文字列に束ねてプルダウンにappendする形を取っています。

詳しくはtech-wikiにまとめています、ご覧下さい。

関連リンク

• jQueryでプルダウンを動的に変更する（ありんく tech-wiki）
• jQueryでプルダウンを動的に変更（サンプル）