Search on the blog

2015年3月20日金曜日

ドロップダウンリストのオプションをAjaxで変更する

 ドロップダウンリストAで選択した値に応じてドロップダウンリストBのオプションを変更したいという場合。
 例えば、都道府県DDLで東京都を選んだら、市区町村DDLのオプションが選択した都道府県配下の市区町村になるというような機能など。
 古いシステムだとこういうの毎回ポストしてやってる場合が多いです。これをAjaxで作ってみようというただの暇つぶしです。

出来たもの
デモ
補足ですが、僕はにゃんにゃんよりこじまこちゃんが好きです。

ソース
久しぶりにjQuery使った気がする。
<html>
<head>
  <meta charset="utf-8">
  <title>sample</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script>

  $(function() {
    $('#groups').change(function() {
      
      // memberドロップダウンリストのクリア
      $('#members').children().remove();

      // Memberドロップダウンリストに選択されたgroupのメンバーを設定
      var team = $('#groups').val(); 
      if (team != "N/A") {
        $.get("api/members/" + team, function(data) {
          $.each(data, function(val, text) {
            $('#members').append($("<option />").val(val).text(text)); 
          });
        }, "json");
      }

    });
  });

  </script>

</head>
<body>
Team &nbsp;<select id="groups" style="width: 100px;">
<option value="N/A"></option>
<option value="teamA">Team A</option>
<option value="teamK">Team K</option>
<option value="teamB">Team B</option>
</select>  
<br/>
Member &nbsp;<select id="members" style="width: 100px;" />
<body>
</html>

0 件のコメント:

コメントを投稿