Q&A
前提・実現したいこと
私はJSについて学び初めてばかりのレベルです。
・JSONを使った親・子・孫でソートする連動式プルダウン
https://teratail.com/questions/318101
こちらを参考に作成。
・検索ボタンを押した際のリロード後、
選択されたプルダウンからdata属性を見て、選択(selectedを付与)した状態にしたい。
発生している問題・エラーメッセージ
・リロードした際にフォームの選択の維持
生成するときにdata-idとvalueの値が等しい場合「selected」を付与する。
該当のソースコード
html（送信前）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <select id="select-pref"> <option value="">1つめの選択</option> </select> <br> <select id="select-city"> <option value="">2つ目の選択</option> </select> <br> <select id="select-town"> <option value="">3つ目の選択</option> </select> <button type="button" class=js_search">検索</button> </form> </body> </html>
html（送信後）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <select id="select-pref"> <option data-id="00" value="">1つめの選択</option> </select> <br> <select id="select-city"> <option data-id="01" value="">2つ目の選択</option> </select> <br> <select id="select-town"> <option data-id="02" value="">3つ目の選択</option> </select> <button type="button" class="js_search">検索</button> </form> </body> </html>
JS
<script> //1つ目の選択 $(function () { for ( let pref of data ){ let buf = '<option value="'+pref.prefid+'">'+pref.prefname+'</option>'; $('#select-pref').append(buf); } }); }); // 2つ目の選択 $('#select-pref').on('change', function () { //1つ目が選ばれたら〜 $('#select-city option:nth-child(n+2)').remove(); // select-cityの2つ目のoptionをクリア $('#select-town option:nth-child(n+2)').remove(); // select-townの2つ目のoptionをクリア let select_prefid = $('#select-pref option:selected').val(); $.getJSON('/head/grade/json/lesson2.json', function (data) { let pref = data.find((p) => p.prefid === select_prefid); for ( let city of pref.city ){ let buf = '<option value="' + city.cityid + '">' + city.cityname + '</option>'; $('#select-city').append(buf); console.log(buf); } }); }); // 3つ目の選択 $('#select-city').on('change', function () { $('#select-town option:nth-child(n+2)').remove(); // select-townの2つ目のoptionをクリア var select_prefid = $('#select-pref option:selected').val(); var select_cityid = $('#select-city option:selected').val(); $.getJSON('/head/grade/json/lesson2.json', function (data) { let pref = data.find((p) => p.prefid === select_prefid); let city = pref.city.find((c) => c.cityid === select_cityid); for ( let town of city.town ){ let buf = '<option value="' + town.townid + '">' + town.townname + '</option>'; $('#select-town').append(buf); console.log(buf); } }); }); </script>
試したこと
$('.js_search').on('click',function(){ });
発火させるキーはこれだと思います。
根本的な書き方がわからず、申し訳ございません。
あなたの回答
tips
プレビュー
