2

Tengo un formulario en donde en 3 ocasiones de necesita, seleccionar Estado, Municipio,CP y colonias, estos select estan anidados, el problema que tengo que es en mi primeros select sin problema se muestran los datos con un onchange() etc.

Mi duda es como puedo usar esos mismas functions en mis otros select y no hacer uno para cada uno?

En el siguiente caso donde necesito esos datos, es una tabla donde se pueden agregar mas de una fila y por cada una se crean select de estado, municipio etc, hasta ahorita le puse un value a cada uno para que sean independientes y no afectar todo si no a su respectiva fila.

Este es mi function js donde cargo los estados

function ComboEstados() {
    console.log("CargarEstados");
    var Estado = document.getElementById('Estado_Domicilio_Origen'); //id primer select
    $.ajax({
        type: "GET",
        url: '/Consulta/getEstados',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
    })
        .done(function (direcciones) {
            console.log(direcciones);
            direcciones.forEach(e => {
                const option = document.createElement('option');
                option.text = e._nombreEstado;
                option.value = e._idEstado;
                Estado.appendChild(option);

            })

        });
}

// Asigna evento al botón "Agregar"
document.querySelector('#enviar').addEventListener('click', agregarFila);

// Crear variable para acceso al cuerpo de la tabla
let tBody = document.querySelector("#example tbody");
function agregarFila() {
    // Crear fila principal
    let i = tBody.children.length;

        tBody.insertRow(-1).innerHTML = `<td value=` + i + `><button type="button" class="btn btn-success">+</button></td>
        <td><select required id="Estado_Domicilio_Origen" class="form-control dropdown-toggle" onchange="ComboMunicipios()"><option selected disabled="disabled">Seleccione Estado</option></select></td>
        <td><select id="Municipio_Domicilio_Origen" class="form-control dropdown-toggle" onchange="ComboCodigos()" ><option selected disabled="disabled">Seleccione Municipio</option></select></td>
        <td><select id="Cp_Domicilio_Origen" class="form-control dropdown-toggle" onchange="ComboColonias()"><option selected disabled="disabled">Seleccione Codigo</option></select></td>
        <td><select id="Colonia_Domicilio_Origen" class="form-control dropdown-toggle"><option selected disabled="disabled">Seleccione Colonia</option></select></td>
        <td><button type="button" class="btn btn-danger" onclick="eliminarFila()">-</button></td>`;
        // Crear fila secundaria, puedes usar el formato que desees
        let trChild = tBody.insertRow(-1);
        trChild.innerHTML = `<td>Calle<input type="text" name="input4[]"></td>
         <td contenteditable="true">Num. Interior</td>
         <td contenteditable="true">Num.Exterior</td>
         <td><label>Pais Origen<label><select id="paisorigen" class="form-control dropdown-toggle"><option value="mx" selected disabled="disabled">Mexico</option></select></td>
         <td contenteditable="true">Referencia</td>`;
        // Asigna clase para ocultar
        trChild.classList.add('tr-child');
    }


// Delega los clics al cuerpo de la tabla, porque aún no existen los elementos
tBody.addEventListener('click', e => {
    // Analiza si el clic se hizo en un botón, por su clase
    if (e.target.classList.contains('btn-success')) {
        // Ejecuta la función, eviando el botón como parámetro
        expandir(e.target);
    }
});
<div class="panel-body">
    <div class="row">
        <div class="col-md-12 ml-auto">
            <button id="enviar" type="button" style="float:right" button" class="btn btn-success mr-2" @*onclick="agregarFila()"*@>Agregar Domicilio</button>
        </div>
    </div>
    <br>
    <table id="example" class="table table-striped table-bordered table-responsive">
        <thead>
            <tr>
                <th style="width:10px;">Acciones</th>
                <th style="width:10px;">Estado</th>
                <th style="width:10px;">Municipio</th>
                <th style="width:10px;">Codigo Postal</th>
                <th style="width:10px;">Colonia</th>
                <th style="width:10px;">Eliminar Fila</th>
            </tr>
        </thead>

        <tbody id="example">
        </tbody>
    </table>
</div>

1 respuesta 1

0

El problema es que estás usando ID en lugar de nombres o clases. Para esta propuesta:

  • Se remplazaron los ID por nombre
  • Se delega el evento change al cuerpo de la tabla y etiqueta select;
  • Dentro de la función se analiza el elemento que disparó el evento y se ejecuta la función correspondiente
  • Obtienes la fila a la que pertenece el select y, desde ahí, accedes a los otros elementos
  • Se cambiaron funciones de Javascript puro a jQuery para no mezclar y hacer más legible el código
  • Se actualizó la función ComboEstados para recibir por parámetro el número de fila al que pertenece el elemento y poder llenarlo correctamente

// Asigna evento al botón "Agregar"
$('#enviar').on('click', agregarFila);

// Crear variable para acceso al cuerpo de la tabla
let tBody = $("#example tbody");
function agregarFila() {
    // Crear fila principal, obtener total de filas existentes
    let i = tBody.children().length;
    tBody.append(`<tr>
        <td value=${i}><button type="button" class="btn btn-success">+</button></td>
        <td><select required name="Estado_Domicilio_Origen" class="form-control dropdown-toggle">
            <option selected disabled="disabled">Seleccione Estado</option>
        </select></td>
        <td><select name="Municipio_Domicilio_Origen" class="form-control dropdown-toggle">
            <option selected disabled="disabled">Seleccione Municipio</option>
        </select></td>
        <td><select name="Cp_Domicilio_Origen" class="form-control dropdown-toggle">
            <option selected disabled="disabled">Seleccione Codigo</option>
        </select></td>
        <td><select name="Colonia_Domicilio_Origen" class="form-control dropdown-toggle">
            <option selected disabled="disabled">Seleccione Colonia</option>
        </select></td>
        <td><button type="button" class="btn btn-danger" onclick="eliminarFila()">-</button></td></tr>`);
    // Crear fila secundaria, puedes usar el formato que desees
    tBody.append(`<tr class="tr-child">
        <td>Calle<input type="text" name="input4[]"></td>
         <td contenteditable="true">Num. Interior</td>
         <td contenteditable="true">Num.Exterior</td>
         <td><label>Pais Origen<label><select name="paisorigen" class="form-control dropdown-toggle">
             <option value="mx" selected disabled="disabled">Mexico</option>
         </select></td>
         <td contenteditable="true">Referencia</td></tr>`);
    // Llenar select de estados enviando número de fila como parámetro
    ComboEstados(i);
}


function ComboEstados(tr) {
    // Obtener select, desde tBody, hijos, índice (tr) y nombre
    let estado = $(tBody).children().eq(tr).find('select[name="Estado_Domicilio_Origen"]');
    // Suponiendo que la petición AJAX devolvió este arreglo
    let direcciones = [
        {_idEstado: 1, _nombreEstado: 'Estado 1'},
        {_idEstado: 2, _nombreEstado: 'Estado 2'},
        {_idEstado: 3, _nombreEstado: 'Estado 3'},
    ];
    // En la función success recorres para agregar opciones
    direcciones.forEach(e => {
        estado.append(`<option value="${e._idEstado}">${e._nombreEstado}</option>`);
    });
}

// Delega los clics al cuerpo de la tabla, porque aún no existen los elementos
tBody.on('click', '.btn-success', e => {
    // Ejecuta la función, eviando el botón como parámetro
    // expandir(e.target); // Comentado porque no existe la función aquí
});

// Delega también los cambios de select al cuerpo de la tabla
tBody.on('change', 'select', e => {
    // Analizas el nombre del select
    if(e.target.name == 'Estado_Domicilio_Origen') {
        // Ejecutar petición AJAX para actualizar municipios enviando select
        ajaxEstado(e.target);
    }
    // Agregas else if para analizar el resto de selects
    // y ejecutas la función que corresponda
});

function ajaxEstado(select) {
    // Obtener valor seleccionado, vas a usar esta variable en la petición AJAX
    let estado = $(select).val();
    console.log('Estado seleccionado: ', estado);
    // Ejecutas la petición AJAX y, en success actualizas el select de municipios
    // Obtener fila actual
    let tr = $(select).closest('tr');
    // Obtener select de municipios de fila actual, por nombre
    let municipio = tr.find('select[name="Municipio_Domicilio_Origen"]');
    // Agregar una opción
    municipio.append('<option value="1">Municipio 1</option>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel-body">
    <div class="row">
        <div class="col-md-12 ml-auto">
            <button id="enviar" type="button" style="float:right" button" class="btn btn-success mr-2" @*onclick="agregarFila()"*@>Agregar Domicilio</button>
        </div>
    </div>
    <br>
    <table id="example" class="table table-striped table-bordered table-responsive">
        <thead>
            <tr>
                <th style="width:10px;">Acciones</th>
                <th style="width:10px;">Estado</th>
                <th style="width:10px;">Municipio</th>
                <th style="width:10px;">Codigo Postal</th>
                <th style="width:10px;">Colonia</th>
                <th style="width:10px;">Eliminar Fila</th>
            </tr>
        </thead>

        <tbody id="example">
        </tbody>
    </table>
</div>

En el fragmento de código solo puse el ejemplo para ver cambios en estados y llenar los municipios. La lógica va a ser la misma para el resto de opciones.

3
  • me sale esto, Uncaught TypeError: tBody.on is not a function
    – cosito
    Commented el 13 ago. 2021 a las 18:58
  • @cosito, en el fragmento de código funciona bien, probablemente no estás cargando jQuery o definiste la variable dentro de una función, de ser este el caso, coloca el código de tBody.on(...) en esa misma función.
    – Triby
    Commented el 13 ago. 2021 a las 19:01
  • @cosito, otra posible causa es que no estás declarando la variable usando el método de jQuery: let tBody = $("#example tbody"); tal vez sigues usando document.querySelector().
    – Triby
    Commented el 13 ago. 2021 a las 19:02

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.