struts2：javascriptとjqueryを使用して最初の選択値に基づいてセカンドセレクトを更新します。

Question

私は3つのhtml selectコントロールを持つstruts2プロジェクトに取り組んでいます。最初の選択は国、2番目は国家、3番目は都市です。状態選択のオプションリストは、その国の状態のみを表示するようにフィルタリングされます。他のいくつかの制限のため、私はstruts2の代わりに基本的なhtml selectコントロールを使用しています。ここで私は、現在の選択を移入していますかのサンプルです：

<select id="stateSelect" name="selectedState"> 
<s:iterator value="#session['myModel'].states" status="itr"> 
    <option value="<s:property value="code"/>"> 
     <s:property value="label"/> 
</option> 
</s:iterator> 
</select> 

私は私が行う必要があることのonchangeイベントを選択し、「国」に基づいて「状態」のリストを取得するために、AJAX呼び出しを行うことであると思います。質問は以下の通りです：
1. jQueryを使用してこのajax呼び出しを行うにはどうすればよいですか？
2. ajax呼び出しのURLとして渡す必要があるのは何ですか？アクション名だけ？
3.結果を解析するにはどうすればよいですか？ Javaコードから、 "コード"と "ラベル"と他のプロパティを持つ "State"オブジェクトのリストを返すことができます。どのように私はjavascriptでこのリストを解析し、selectタグのための適切なオプションを生成できますか？

Answer 1

<select id="stateSelect" name="selectedState" onchange="loadCities(this.value)"> 
<s:iterator value="#session['myModel'].states" status="itr"> 
    <option value="<s:property value="code"/>"> 
     <s:property value="label"/> 
</option> 
</s:iterator> 
</select> 

<select id="citySelect" name="selectedCity" > 
</select> 

jQueryの

function loadCities(value){ 

     $("#citySelect").get(0).options.length = 0; 
     $("#citySelect").get(0).options[0] = new Option("Loading cities", "-1"); 

     $.ajax({ 
      type: "POST", 
      url: "MyStrutsActionToGetCities", 
      data: "{stateID:" + value+ "}", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function(msg) { 
       $("#citySelect").get(0).options.length = 0; 
       $("#citySelect").get(0).options[0] = new Option("Select city", "-1"); 

       $.each(msg.d, function(index, item) { 
        $("#citySelect").get(0).options[$("#citySelect").get(0).options.length] = new Option(item.Display, item.Value); 
       }); 
      }, 
      error: function() { 
       $("#citySelect").get(0).options.length = 0; 
       alert("Failed to load cities"); 
      } 
     }); 
} 

は更新this tutorial

から撮影：この例では、選択された状態に基づいて市のリストをロードするために使用されます。あなたは国の選択に状態リストをロードするために同様のことを行うことができます。また、here is a linkは、プラグインを使用しないストラットのためのajaxリクエスト/レスポンスを記述しています。

Answer 2

一般的に、これを行う方法は、最新バージョンのStruts2に同梱されているStruts2 JSON pluginを使用することです。 JSPでjQueryと対話するには、s：urlを使用してJSONアクションのURLを作成し、jQueryの.getJSON()または.load（）を使用して呼び出すことができます。

ただし、ドロップダウンの選択肢が実際にはそれほど複雑でない場合は、オーバーアーキテクトしないでください。最初のページの読み込み時にs：iteratorを使用してすべてをレンダリングし、ドロップダウンボックスに.change()を使用して、選択したコンポーネント間でデータを移動するか、フォーム送信の選択ボックスの1つに名前属性を追加する方が簡単です。