31008


springBootで動的にOptionを変更したいです。

メインのオプションの選択に従って  
サブのオプションの選択肢を変化させたいのですが、  
どのようにしていいのかが浮かびません…。  
アドバイスいただけると助かります。

■java コントローラー

List mainoptionList;  
List suboptionList;  
→SubOptionはString option、String suboptionを持ちます。  
  
mav.addObject("mainoptionList", mainoptionList);  
mav.addObject("suboptionList", suboptionList);

■HTML5＋thymeleaf

[code]

    <select id="mainoption" name="mainoption">
        <option th:each=" mainoption : ${ mainoptionList } "
            th:text=" ${ mainoption } "></option>
    </select>
    <select id="suboption" name="suboption">
        <option th:each=" suboption : ${ suboptionList } "
            th:text=" ${ suboption.suboption } "></option>
    </select>
    
[/code]

以下でサブオプションを入れ替えればいい…と思うのですが、  
コントローラーからわたってきたsuboptionListをどのようにJSで受け取ればいいのかわからない状態です。

■JS

[code]

    $('#mainoption').on('change', function(){
    });
    
[/code]


CC BY-SA 3.0
2016-09-28T10:31:44.210
29220
2017-02-01T02:21:44.397
12842
question
javascript html5 spring-boot
springBootで動的にOptionを変更したいです


基本的には、動的に`<option></option>`を変える方法は二つがあります。

  1. 最初にすべてのメインオプションに対して、サブオプションを取得して、`<input type="hidde"/>`を利用して画面（HTML）に保存しておいて、メインオプションのチェンジイベントが発火されたら、動的にサブオプションの`<option></option>`を差し替えます。
  2. メインオプションのチェンジイベントが発火されたら、AJAXでサーバーに選択したメインオプションに対応するサブオプションを取得して、動的にサブオプションの`<option></option>`を差し替えます。

ご質問の内容を見ると、1に適用されますね。

その場合、下記の手順に従い、解決できると思います。  
まず、JSON形式の`suboptionList`を`<input type="hidde"
id="suboptionListHidden"/>`に保存します。

次は、`$('#mainoption').on('change',
function(){});`に`$("suboptionListHidden").val()`から選択したメインオプションに該当するサブオプションを特定して、`$("#suboption").append()`でオプションを一つ一つ追加します。

参考

  * JAVAで'List'を'JSON形式'にするツールについて、[how-to-parse-json-in-java](https://stackoverflow.com/questions/2591098/how-to-parse-json-in-java)をご参照ください。

  * JQUERYでJSONオブジェクトをパースする方法は[jQuery.parseJSON()](http://api.jquery.com/jquery.parsejson/)です。

  * JQUERYでOPTIONを変える方法は[how-to-change-options-of-select-with-jquery](https://stackoverflow.com/questions/1801499/how-to-change-options-of-select-with-jquery)をご参照ください。


CC BY-SA 3.0
2016-12-08T04:01:39.237
31008
2016-12-08T04:19:08.367
2017-05-23T12:38:55.250
-1
13152
29220
answer