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>