- ベストアンサー
2段階プルダウンで選択内容を切り替える方法
- 2段階プルダウンでの選択内容の切り替え方法を教えてください。
- 選択した1段階目の内容を非表示にし、2段階目の選択内容を表示させる方法を教えてください。
- 参考サイトのコードを使用して、2段階のプルダウンで選択内容を切り替えたいのですが、どのようにすれば良いでしょうか？
- php_learn
- お礼率32% (506/1550)
- JavaScript
- 回答数4
- ありがとう数6
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
年月日を選択するとAjaxでphp側のMySQLを呼び出して結果を表にしています。 これについての質問は個別に！ <!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> </style> <body> <p> <select id="Y"></select> / <select id="M"></select> / <select id="D"></select> </p> <table border="1" id="T"></table> <script> async function ajax (path, args = { }, cbFunc = null, ...cbArgs) { let res = await fetch (path, { method: 'post', body: JSON.stringify (args) }); let txt = await res.text (); let json = JSON.parse(txt); return 'function' === typeof cbFunc ? cbFunc.call (...cbArgs): json; } function ary2tbody (a,b=document.createElement('tbody')){a.reduce((b,a)=>(a.reduce((c,d)=>(c.insertCell().append(d),c),b.insertRow()),b),b)} function replaceOptions (e, ary) {e.replaceChildren (...ary.map (a=> new Option (...a)))} function replaceY (y=(new Date).getFullYear(),n=10) {replaceOptions (Y,[...Array(n)].map ((_,i)=>[y-i]))} function replaceM () {replaceOptions (M,[...Array(12)].map ((_,i)=>[i+1]))} function replaceD (y=Y.value,m=M.value) { replaceOptions (D,[...Array((new Date (y,m,0)).getDate())].map ((_,i)=>[i+1]))} async function loadContent (y=Y.value, m=M.value, d=D.value) { ary2tbody(await ajax ('test.php', {date: `${y}-${m}-${d}`}), T); } function handler (event) { let e = event.target; switch (true) { case M == e : replaceD (); break; case D == e : loadContent (); break; } } document.addEventListener ('change', handler, false); [replaceY,replaceM,replaceD].map(f=>f()); </script> -- 以下 test.php <?php const MySQL_DBNAME = '********'; const MySQL_HOST = 'localhost'; const MySQL_USER = '********'; const MySQL_PASS = '********'; $db = sprintf ('mysql:dbname=%s; host=%s; charset=utf8mb4', MySQL_DBNAME, MySQL_HOST); $mysql = new PDO ($db, MySQL_USER, MySQL_PASS); $query = 'select * from table_name where :date < date';//ここは適当に $args = json_decode (file_get_contents ('php://input'), true); $hd = $mysql-> prepare ($query); $hd-> execute ($args); $result = $hd-> fetchAll ( PDO::FETCH_NUM); header ('Content-type: application/json; charset=utf-8'); header ('X-Content-Type-Options: nosniff'); echo json_encode ($result);//JSONに変換する ?>
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
可能！
お礼
1つだけお聞きしたいのですがボックスを1つにまとめるのはどうすればいいでしょうか？ いきなり3つの選択肢ではなく1つを選択したらボックスを削除して新たに1つボックスが出るようにしたいです。
補足
ありがとうございます。応用して作成してみます。
- babu_baboo
- ベストアンサー率51% (268/525)
#No.1です。修正です。 function replaceOptions (e, ary) { e.replaceChildren (...ary.map (a=> new Option (a))); }
- babu_baboo
- ベストアンサー率51% (268/525)
onchange で定義されている関数の中に機能を盛り込み過ぎなので、まず機能ごとに細分化します。すると他でも応用が利くようになります。 例えば replaceOptions関数です。select要素を書き換えるときに使えます。 ショートコーディングは避けましょう！ <!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> </style> <body> <select name="OS" id="A"> <option value="">OSを選択</option> <option value="Windows">Windows</option> <option value="Android">Android</option> <option value="iOS">iOS</option> <select> <select name="version" id="B"> </select> <script> let versionArray = new Array(); versionArray[''] = new Array('バージョン情報'); versionArray['Windows'] = new Array('XP', 'Vista', '7', '8', '8.1', '10'); versionArray['Android'] = new Array('7 (Nougat)', '8 (Oreo)', '9 (Pie)', '10'); versionArray['iOS'] = new Array('10以下', '11', '12', '13'); function replaceOptions (e, ary) { e.options.length = 0; let ops = ary.map (a=> new Option (a));//汎用性を上げるなら new Option (...a)が望ましい e.append (...ops); } function replaceVersion () { replaceOptions (B, versionArray[A.value]); } function handler (event) { let e = event.target; switch (true) { case A == e : replaceVersion (); A.style.display = 'none'; break; } } document.addEventListener ('change', handler, false); replaceVersion (); </script>
補足
修正ありがとうございます。 functionで機能を分解させたんですね。 1点だけお聞きしたいのですが、これを年月に応用させて1段階目は年、2段階目は月にして。月の時に値を取得してそれをSQLに渡してアーカイブページを表示させる事は可能でしょうか？
お礼
お時間をとらせてしまい申し訳ありません。 下記ページに新たに質問いたしました。よろしくお願い致します。 Wordpressを使用しているのをお伝えしておりませんでした。 storage_rss.phpはcronのコードとなっております。 archive.phpに$値を渡して表示する予定です。 絵イラストのサイトを立ち上げたくサイトを作成しています。 ※表示画面 https://imgur.com/zbVkpxv.jpg ※アーカイブページコード https://wandbox.org/permlink/iymNcSiuVAIyx5ri
補足
回答ありがとうございます。$を渡す前提でSQLを組んだうえで再度コメントいたします。質問は追加でたてます、よろしくお願い致します。