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

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

新規登録して質問してみよう
ただいま回答率
85.53%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET MVC 4

ASP.NET MVC4は、MVCパターンを利用して、高度なテスト機能と保守機能を備えた Web アプリケーションを開発するためのフレームワークです。

Q&A

解決済

2回答

389閲覧

JSで動的なリストの選択状態を保持したい

syusyusyu___

総合スコア1

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

MVC

MVC(Model View Controller)は、オブジェクト指向プログラミングにおけるモデル・ビュー・コントローラーの総称であり、ソフトフェア開発で使われている構築パターンとしても呼ばれます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ASP.NET MVC 4

ASP.NET MVC4は、MVCパターンを利用して、高度なテスト機能と保守機能を備えた Web アプリケーションを開発するためのフレームワークです。

0グッド

0クリップ

投稿2023/08/22 06:23

実現したいこと

selectの選択内容をjavascriptで保持したい

前提

カテゴリ1によって動的に値が変わるカテゴリ2があります。
カテゴリ1の内容はサーバー側で処理していますが、カテゴリ2は1の選択によって値が変わります。その為Sessionでは選択内容を保持してもできないのでlocalstrageを使用しようと思いましたが上手くいきません。
サーバー側はC#、MVCです

発生している問題・エラーメッセージ

エラーなし

該当のソースコード

JavaScript

1$(document).ready(function () { 2 $("#category1").change(function () { 3 var selectedCategory1 = $(this).val(); 4 localStorage.setItem("selectedValue", selectedCategory1); 5 6 $("#category2").empty(); 7 8 if (selectedCategory1) { 9 $.getJSON("/Home/GetCategory2Options", { category1: selectedCategory1 }, function (data) { 10 $("#category2").append('<option value="">' + "すべて" + "</option>"); 11 $.each(data, function (index, value) { 12 $("#category2").append("<option value='" + value + "'>" + value + "</option>"); 13 }); 14 }); 15 } 16 }); 17 18 $("#category2").change(function () { 19 var selectedCategory2 = $(this).val(); 20 localStorage.setItem("selectedValue2", selectedCategory2); 21 }); 22 }); 23 24 window.onload = function () { 25 // localStorageから保存された選択された値を取得 26 var selectedValue = localStorage.getItem("selectedValue"); 27 28 if (selectedValue !== null) { 29 $("#category1").val(selectedValue); // category1の選択状態を復元 30 31 $("#category2").empty(); // 一度リセットしてからオプションを追加 32 $.getJSON("/Home/GetCategory2Options", { category1: selectedValue }, function (data) { 33 var selectedCategory2 = localStorage.getItem("selectedCategory2"); 34 $("#category2").append('<option value="">すべて</option>'); 35 $.each(data, function (index, value) { 36 $("#category2").append("<option value='" + value + "'" + (value == localStorage.getItem("selectedCategory2") ? "selected" : "") + ">" + value + "</option>"); 37 }); 38 39 }); 40 } 41 }

試したこと

localstrage自体には値が入っていることが確認出来ましたがeachで参照している時はnullになっていました。
each分の中で直接localstrageを参照する場合も同様でした。
先にカテゴリ2をeachで復元してからvalueを選択する方法も試しましたがダメでした。

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

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

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

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

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

yambejp

2023/08/22 06:28

HTMLを提示ください またapiが返すjsonの形式も明示されたほうがよいでしょう
guest

回答2

0

jQueryの場合すでに設定済みのイベントはtrigger()メソッドで呼べます
(同じ処理を2度書く必要はありません)

javascript

1<script> 2$(function(){ 3 var selectedCategory1 = localStorage.getItem("selectedValue"); 4 $('#category1').val(selectedCategory1).on('change',function(){ 5 var selectedCategory1 = $(this).val(); 6 localStorage.setItem("selectedValue", selectedCategory1); 7 var url="/Home/GetCategory2Options"; 8 $.ajax({ 9 url:url, 10 data:{category1:selectedCategory1}, 11 dataType:"json", 12 }).done(function(data){ 13 console.log(data); 14 }); 15 }).trigger('change'); 16}); 17 </script> 18<select id="category1"> 19<option value="">--</option> 20<option value="1">1</option> 21<option value="2">2</option> 22<option value="3">3</option> 23</select>

ふつうにjsで書けばこんな感じ

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 const selectedCategory1 = localStorage.getItem("selectedValue"); 4 category1.value=selectedCategory1; 5 category1.addEventListener('change',()=>{ 6 const selectedCategory1 = category1.value; 7 localStorage.setItem("selectedValue", selectedCategory1); 8 const url="/Home/GetCategory2Options"; 9 const usp=new URLSearchParams(); 10 usp.set('category1',selectedCategory1); 11 fetch(`${url}?${usp}`).then(res=>res.json()).then(data=>{ 12 console.log(data); 13 }); 14 }); 15 const e_change=new Event("change"); 16 category1.dispatchEvent(e_change,true,true); 17}); 18 </script> 19<select id="category1" name="category1"> 20<option value="">--</option> 21<option value="1">1</option> 22<option value="2">2</option> 23<option value="3">3</option> 24</select>

投稿2023/08/22 06:56

編集2023/08/22 07:50
yambejp

総合スコア114390

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

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

syusyusyu___

2023/08/23 04:22

ありがとうございます!
guest

0

ベストアンサー

js

1localStorage.setItem("selectedValue2", selectedCategory2);

js

1var selectedCategory2 = localStorage.getItem("selectedCategory2");

保存時は selectedValue2、復元時は selectedCategory2 がキーになってますね。同じキー名にすべきかと思います。

投稿2023/08/22 06:39

編集2023/08/22 06:40
int32_t

総合スコア20533

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

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

syusyusyu___

2023/08/22 12:44

すみません。 盲点でした。 もっとよく見ます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問