質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

962閲覧

連動するプルダウンを選択後、検索ボタンでリロード後にも選択した内容が保存される

after.noon.tea

総合スコア1

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/02/02 07:49

編集2022/01/12 10:55

前提・実現したいこと

私は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(){ });

発火させるキーはこれだと思います。
根本的な書き方がわからず、申し訳ございません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問