Combos dinamicos Jsp

Hola a todos como estan? espero que bien, hoy voy a mostrarles un ejemplo de combos dinamicos en jsp.

Veremos un tema que se usa en casi todos los proyectos de desarrollo, combos dinamicos, combos dependientes.

En este ejemplo estoy usando Spring Mvc, JQuery, Ajax, Javascript, Java.

Primero vamos a tener dos combos, uno de “Tipo de Seguro”, y otro “Categoría de Seguro”.

Desde nuestro controller, al momento antes de mostrar la pagina donde tenemos nuestras listas, vamos a cargar el primer combo.

@RequestMapping(value = "/seguros", method = RequestMethod.GET)
  public String seguroCalculo(HttpSession session, ModelMap model) {
    SeguroDto seguro = new SeguroDto();
    
    model.addAttribute("seguro ", seguro );
    session.setAttribute("seguro ", seguro );
    initComponent(model, session);
    return "seguroCalculo";
  }

El método “initComponent” se va a encargar de buscar cargar la lista usando un manager. Luego los guarda en session para ser usado en la vista.

private void initComponent(ModelMap model, HttpSession session) {
    List<ItemComboDto> tipoSeguroCombo= dominioManager.findAllItemComboFromDominios(ConstantDominios.TIPO_SEGURO);

    model.addAttribute("tipoSeguroCombo", tipoSeguroCombo);

    session.setAttribute("tipoSeguroCombo", tipoSeguroCombo);
    
 }

En nuestro jsp mostramos nuestra lista de la siguiente forma:

<label>Tipo de Seguro</label>
<div class="styled-select">
   <form:select path="tipoSeguro" name="tipoSeguro" class="form-control">
      <form:option value="" label="Selecciona tipo" />
      <form:options items="${tipoSeguroCombo}" itemValue="id" itemLabel="value" />
   </form:select>
   <form:errors path="tipoSeguro" />
</div>

Ahora vamos a cargar el segundo combo de categorías de seguro dependiendo del tipo de seguro seleccionado.

<script>
$("#tipoSeguro").on("change", function (e) {
	$.ajax({
    url: "../seguro_ajax",
    method: "POST",
    data: { tipo: $(this).val() },
    dataType: "json",
    success: function (response) {
      if (response) {
        $("#catgoriaSeguro option:not(:disabled)").remove();
        $.each(response, function(index, option) {
        	console.log("option: "+option)
        	$("#catgoriaSeguro").append('<option value="'+ option.id +'">'+ option.value +'</option>') 
        });
      }
    }
  });
});
</script>

El código lo que hará es al momento de cambiar, “change”, ejecuta el método para buscar los valores para cargar el segundo combo, abajo el código que se ejecuta.

@RequestMapping(value = "/seguro_ajax", method = RequestMethod.POST)
  @ResponseBody
  public List<ItemComboDto> getModals(@RequestParam(value = "tipo", required = true) String tipo) {
    System.out.println("valor pasado como pasametro: " + tipo);
    return tipo != null ? dominioManager.findAllCategoria(Integer.valueOf(tipo)) : null;
  }

Código de nuestro segundo combo de Categorías

<form:select path="catgoriaSeguro" name="catgoriaSeguro" class="form-control">																
   <option value="" selected disabled >Selecciona categoria</option>
   <form:options items="${categoriaSeguroCombo}" itemValue="id" itemLabel="value" />
</form:select>

Probamos y vemos como va cambiando el segundo combo.

Seleccionamos otro:

Jlopezjujuy

administrator