質問: springBootで動的にOptionを変更したいです。 メインのオプションの選択に従って サブのオプションの選択肢を変化させたいのですが、 どのようにしていいのかが浮かびません...。 アドバイスいただけると助かります。 ■java コントローラー List mainoptionList; List suboptionList; →SubOptionはString option、String suboptionを持ちます。 mav.addObject("mainoptionList", mainoptionList); mav.addObject("suboptionList", suboptionList); ■HTML5+thymeleaf ``` ``` 以下でサブオプションを入れ替えればいい...と思うのですが、 コントローラーからわたってきたsuboptionListをどのようにJSで受け取ればいいのかわからない状態です。 ■JS ``` $('#mainoption').on('change', function(){ }); ```
回答: 基本的には、動的に``を変える方法は二つがあります。 1. 最初にすべてのメインオプションに対して、サブオプションを取得して、``を利用して画面(HTML)に保存しておいて、メインオプションのチェンジイベントが発火されたら、動的にサブオプションの``を差し替えます。 2. メインオプションのチェンジイベントが発火されたら、AJAXでサーバーに選択したメインオプションに対応するサブオプションを取得して、動的にサブオプションの``を差し替えます。 ご質問の内容を見ると、1に適用されますね。 その場合、下記の手順に従い、解決できると思います。 まず、JSON形式の`suboptionList`を``に保存します。 次は、`$('#mainoption').on('change', function(){});`に`$("suboptionListHidden").val()`から選択したメインオプションに該当するサブオプションを特定して、`$("#suboption").append()`でオプションを一つ一つ追加します。 参考 * JAVAで'List'を'JSON形式'にするツールについて、how-to-parse-json-in-javaをご参照ください。 * JQUERYでJSONオブジェクトをパースする方法はjQuery.parseJSON()です。 * JQUERYでOPTIONを変える方法はhow-to-change-options-of-select-with-jqueryをご参照ください。