Question

I’m working with Struts 2. I’m trying to populate a combobox (select) with data from a database, the values are defined by another combobox.

When I select a state from first combobox the second must load data from database.

This is what I have:

JSP:

<script type="text/javascript">
            function cargarMunicipios(estado){
                console.log(estado);
                var estado="estado="+estado;
               $.getJSON('getMunicipios'),estado,function(data){
                    $('.result').html(''+data.estados+'');
                    $.each(data.estados,function(index,value){
                        var opcion=new Option(value);
                        var municipio=document.getElementById("municipios");
                        console.log(value);
                        municipio.add(opcion)
                    })
                } 
            }
        </script>

...

<s:select list="estados" name="estados" listValue="nombre"
                      listKey="nombre" label="Estado" id="estados" onchange="cargarMunicipios(this.value)"/>
            <s:select list="municipios" name="municipios" listValue="nombre"
                      listKey="nombre" label="Municipio" id="municipios"
                      />

This is the action on struts.xml :

 <action name="getMunicipios" class="actions.PrepararMedicosAction" method="loadMunicipios">
            <result type="json">
                <param name="root">nombre</param>
            </result>        
        </action>     

and this is the method that is called by action:

public String loadMunicipios(){
        municipios=fachada.buscaMunicipios(new Estado(Integer.SIZE, estado, ""));
        return SUCCESS;
    }

How but when I select a state the second dropbox isn’t being populated, on web console I get the http request as “Ok”.

I’m very new with Ajax and Struts 2.. please help me .. thanks 🙂

Answer 1

It looks like you are using jQuery. Try something like this:

$.getJSON('getMunicipios'),estado,function(data){
    $('.result').html(''+data.estados+'');
    $.each(data.estados,function(index,value){
        var opcion= $('<option>').attr('value', value);
        var municipio = $("#municipios");
        console.log(value);
        municipio.append(opcion);
    });
});