1

buenas tardes

tengo el siguiente código que lo que trata de hacer es tomar las provincias y cantones, pero sinceramente no se como hacer para que al seleccionar la provincia, cargue los cantones que coinciden con el ID de provincia

<html>

    <head>
        <title>Obteniendo las provincias</title>
            <script src="js/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                    $.ajax({
                        dataType: "json",
                        url: "https://ubicaciones.paginasweb.cr/provincias.json",
                        data: {},
                        success: function (data) {
                            var html = "<select>";
                            for(key in data) {
                                html += "<option value='"+key+"'>"+data[key]+"</option>";
                            }
                            html += "</select";
                            $('#destino').html(html);
                        }
                    });
            })
            </script>

            <script>
            $(document).ready(function () {
                var n= '1';
                    $.ajax({
                        dataType: "json",
                        url: 
                        "https://ubicaciones.paginasweb.cr/provincia/"+n+"/cantones.json",
                        data: {},
                        success: function (data) {
                            var html = "<select>";
                            for(key in data) {
                                html += "<option value='"+key+"'>"+data[key]+"</option>";
                            }
                            html += "</select";
                            $('#canton').html(html);
                        }
                    });

            })
            
            
        </script>


    </head>
      
       <div id="destino" ></div>
 

         <div id="canton"></div>
    </body>
</html>

como podrán observar en la segunda función estoy usando una variable "var n=1" de esa forma pues estoy mandando el id de la provincia, yo lo que necesito es que esa variable tome por defecto el value del "id=destino"

espero puedan ayudarme.


muchas gracias por la informacion y sugerencias ya que estoy aprendiendo javascript y web services soy principiante, ahora lo que trato de hacer con el código que me facilitaste es que me muestre los distritos. por lo que estoy haciendo esto:

        $(document).on('change', '#canton > select', function() {
        var provincia = this.value;
        var canton = this.value;
         $.ajax({
             dataType: "json",
             url: "https://ubicaciones.paginasweb.cr/provincia/" + provincia + "/canton/" + canton + "/distritos.json",
             data: {},
             success: function(data) {
                 agregarDistritos(data);
             }
         });

    });

pero cuando selecciono por ejemplo el distrito 8 de algun canton me da error ya que toma el valor del canton tambien en la provincia:

jquery.min.js:4 GET https://ubicaciones.paginasweb.cr/provincia/8/canton/8/distritos.json 404 ()

1 respuesta 1

1

Te daré algunos consejos referente a tu código:

  1. El callback ready no lo deberías utilizar más de una vez ya que esto tiene un impacto en el rendimiento. Esto te impactará cuando desarrolles aplicaciones con una alta demanda de recursos del lado de tu usuario.
  2. Cada callback ready tiene su propio contexto. Esto quiere decir que desde la primera llamada ready no podrás accesar variables o funciones del segundo ready y viceversa.
  3. Debes implementar la función change sobre la lista de las provincias. Así cuando alguien seleccione un valor nuevo, se ejecute la función change y se haga el llamado a tu función que retorna los cantones por provincias.
  4. Normalmente solo es necesario llamar la función change de esta manera $('#mi_select').change(function() {}); pero como tu estas creando un nuevo object select por cada ejecución, deberas utilizar / escuchar el evento change a nivel del documento, para cualquier select debajo del objecto destino. Esto es para objetos dinámicos, es por esta razón que lo llame de esta manera $(document).on('change', '#destino > select', function() {})
  5. He modificado tu código y creado dos variables (todas las provincias y los cantones de las dos primeras provincias) para motivos de pruebas y demostración. Deberas comentar todos los bloques marcados // INICIO: Comentar al momento de utilizar ajax hasta // FIN: Comentar al momento de utilizar ajax y des comentar los contrarios.

$(document).ready(function() {

    // INICIO: Comentar al momento de utilizar ajax
    var provincias = {
            "1": "San José",
            "2": "Alajuela",
            "3": "Cartago",
            "4": "Heredia",
            "5": "Guanacaste",
            "6": "Puntarenas",
            "7": "Limón"
            },
        cantones = {'1': {
            "1": "Central",
            "2": "Escazú",
            "3": "Desamparados",
            "4": "Puriscal",
            "5": "Tarrazú",
            "6": "Aserrí",
            "7": "Mora",
            "8": "Goicoechea",
            "9": "Santa Ana",
            "10": "Alajuelita",
            "11": "Vázquez De Coronado",
            "12": "Acosta",
            "13": "Tibás",
            "14": "Moravia",
            "15": "Montes De Oca",
            "16": "Turrubares",
            "17": "Dota",
            "18": "Curridabat",
            "19": "Pérez Zeledón",
            "20": "León Cortés Castro"
        }, '2': {
            "1": "Central",
            "2": "San Ramón",
            "3": "Grecia",
            "4": "San Mateo",
            "5": "Atenas",
            "6": "Naranjo",
            "7": "Palmares",
            "8": "Poás",
            "9": "Orotina",
            "10": "San Carlos",
            "11": "Zarcero",
            "12": "Valverde Vega",
            "13": "Upala",
            "14": "Los Chiles",
            "15": "Guatuso"
        }};
    // FIN: Comentar al momento de utilizar ajax

    // INICIO: Descomentar al momento de utilizar ajax
    // $.ajax({
    //     dataType: "json",
    //     data: [],
    //     url: "https://ubicaciones.paginasweb.cr/provincias.json",
    //     type: 'GET',
    //     crossDomain: true,
    //     success: function(data) {
    //         agregarProvincias(data);
    //     }
    // });
    // FIN: Descomentar al momento de utilizar ajax

    $(document).on('change', '#destino > select', function() {
        var provincia = this.value;
        // INICIO: Descomentar al momento de utilizar ajax
        // $.ajax({
        //     dataType: "json",
        //     url: "https://ubicaciones.paginasweb.cr/provincia/" + provincia + "/cantones.json",
        //     data: {},
        //     success: function(data) {
        //         agregarCantones(data);
        //     }
        // });
        // FIN: Descomentar al momento de utilizar ajax

        // INICIO: Comentar al momento de utilizar ajax
        agregarCantones(cantones[provincia]);
        // FIN: Comentar al momento de utilizar ajax
    });

    // INICIO: Comentar al momento de utilizar ajax
    agregarProvincias(provincias);
    // FIN: Comentar al momento de utilizar ajax

    function agregarProvincias(data) {
        var html = "<select>";
        for (key in data) {
            html += "<option value='" + key + "'>" + data[key] + "</option>";
        }
        html += "</select";
        $('#destino').html(html);
    }

    function agregarCantones(data) {
        var html = "<select>";
        for (key in data) {
            html += "<option value='" + key + "'>" + data[key] + "</option>";
        }
        html += "</select";
        $('#canton').html(html);
    }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="destino" ></div>
<div id="canton"></div>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.