I need help with something

I am making a web application, in a web form I have a combo of country and another of departments, I need the combo of departments to change depending on the selected country.

From now, thank you for you help

<div class="form-row">
            <div class="col-md-12 mb-3">
                <label for="emp_pais">Pa&iacute;s:</label>
                <div class="form-group">
                    <select name="emp_pais" id="emp_pais" class="form-control">
                    <!--<select name="emp_pais" id="emp_pais" class="form-control">-->
                        <option value="" disabled selected>Seleccione un pa&iacute;s</option>
                        <% select TPaises %>
                        <% scan %>
                            <% if TPaises.pais_cod = poempresa.emp_pais then %>
                                <option value="<%= TPaises.pais_cod %>" selected><%= TPaises.pais_cod + " (" + TPaises.pais_descrip + ")" %></option>
                            <% else %>
                                <option value="<%= TPaises.pais_cod %>"><%= TPaises.pais_cod + " (" + TPaises.pais_descrip + ")" %></option>
                            <% endif %>
                        <% endscan %>
                    </select>
                </div>
            </div>
        </div>

        <div class="form-row">
            <div class="col-md-12 mb-3">
                <label for="emp_pais">Departamento:</label>
                <div class="form-group">
                    <select name="emp_depto" id="emp_depto" class="form-control">
                        <option value="" disabled selected>Seleccione un departamento</option>
                        <% select TDptos %>
                        <% scan %>
                            <% if alltrim(TDptos.dpto_pais_cod) == alltrim(poempresa.emp_pais) and alltrim(TDptos.dpto_cod) == alltrim(poempresa.emp_depto) then %>
                                <option value="<%= TDptos.dpto_cod %>" selected><%= TDptos.dpto_cod + " (" + TDptos.dpto_descrip + ")" %></option>
                            <% else %>
                                <option value="<%= TDptos.dpto_cod %>"><%= TDptos.dpto_cod + " (" + TDptos.dpto_descrip + ")" %></option>
                            <% endif %>
                        <% endscan %>
                    </select>
                </div>
            </div>
        </div>

You have to either:

• Refresh the page on the combo change (ie. pick up the new value and reload everything)
• Use Http callbacks (Ajax) and JavaScript code to update the data that's already on the page

The former tends to be slow and potentially jarring as the page jumps. This depends on how much else is on the page - if you keep the content simple then this can work fine. The AJAX solution requires manually updating the page content via script code and making Http callbacks to retrieve the udpated data. This requires a bit of extra work and different set of tools as you have to do that work in JavaScript.

+++ Rick ---

Thank you very much for your reply,

After searching a lot I found how to solve it, support me in chatgpt for the solution. Below is the code that worked for me.

FUNCTION actualizar_combo_dpto
	lcpaisel = REQUEST.querystring("pais")

	IF EMPTY(lcpaisel)
		lcpaisel = ""
	ENDIF

	lchtml = ''
	IF USED("TDptos")
		SELECT tdptos
		lchtml = '<option value="" disabled selected>Seleccione un departamento</option>'

		SCAN FOR dpto_pais_cod = lcpaisel
			lchtml = lchtml + '<option value="' + tdptos.dpto_cod + '">' + tdptos.dpto_cod + ' (' + tdptos.dpto_descrip + ')</option>'
		ENDSCAN
	ENDIF

	response.contenttype = "text/plain"
	response.WRITE(lchtml)
ENDFUNC

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/scripts/jquery.min.js"></script>
<script type="text/javascript">
    function actualizarDepartamentos() {
        var lcpaisc = $('#emp_pais').val();
        //console.log("Pais seleccionado en combo",lcpaisc)
        if (lcpaisc) {
            $.get('actualizar_combo_dpto.emp?pais=' + lcpaisc, function(data) {
                $('#emp_depto').html(data);
            });
        } else {
            $('#emp_depto').html('<option value="" disabled selected>Seleccione un departamento</option>');
        }
    }
</script>