struts2: actualizar segundo seleccionar basado en el primer valor de selección usando javascript y jquery

Question

Estoy trabajando en un proyecto struts2 donde tengo 3 controles de selección html cada uno depende de la selección previa. Supongamos que la primera selección es para el país, la segunda para el estado y la tercera para la ciudad. La lista de opciones en la selección de estado se filtrará para mostrar solo los estados en ese país, etc. Debido a algunas otras limitaciones, estoy usando el control de selección html básico en lugar de struts2. Este es un ejemplo de cómo estoy rellenando actualmente el selecto:

<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> 

Creo que lo que tengo que hacer es onchange caso hago una llamada ajax para recuperar la lista de "estados" basado en el "país" seleccionado . Las preguntas son:
1. ¿Cómo puedo hacer esta llamada ajax usando jquery?
2. ¿Qué debo pasar como la url de la llamada ajax? solo el nombre de la acción?
3. ¿cómo puedo analizar los resultados? Desde el código Java, puedo devolver una lista de objetos "State" que tienen "código" y "etiqueta" y otras propiedades. ¿Cómo puedo analizar esta lista en javascript y generar las opciones adecuadas para la etiqueta de selección?

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"); 
      } 
     }); 
} 

Tomado de this tutorial

actualización: Este ejemplo se utiliza para cargar la lista de ciudad basado en el estado seleccionado. Puede hacer algo similar a la lista de estado de carga en la selección de país. También here is a link que describe la solicitud/respuesta ajax para struts sin usar ningún complemento

Answer 2

Generalmente, la forma de hacerlo es usando el Struts2 JSON plugin que se envía con versiones recientes de Struts2. Para interactuar con jQuery en su JSP, querrá usar s: url para crear una URL para su acción JSON y luego puede invocarlo usando jQuery's .getJSON() o .load().

Sin embargo, si sus opciones desplegables realmente no son tan complicadas, no haga demasiadas cosas. Puede ser más fácil representarlos todos utilizando s: iterator en la carga de página inicial y usar .change() en sus cuadros desplegables para mover los datos entre los componentes seleccionados o aumentar el atributo de nombre en uno de los cuadros de selección para el envío de formularios.