例えば、都道府県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 <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 <select id="members" style="width: 100px;" /> <body> </html>
0 件のコメント:
コメントを投稿