Skip to content

Instantly share code, notes, and snippets.

@fmagrosoto

fmagrosoto/Estados de la República

Last active May 27, 2023 21:50
Show Gist options
  • Save fmagrosoto/0cce8492f319fde5bc73 to your computer and use it in GitHub Desktop.
Save fmagrosoto/0cce8492f319fde5bc73 to your computer and use it in GitHub Desktop.
Download ZIP
Lista de estados de la República Mexicana en un campo select
Raw
Estados de la República
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>Lista de Esados de la República Mexicana</title>
</head>
<body>
<h1>Lista de Estados de la República Mexicana</h1>
<label>Estado de la República</label>
<select name="estado">
<option value="no">Seleccione uno...</option>
<option value="Aguascalientes">Aguascalientes</option>
<option value="Baja California">Baja California</option>
<option value="Baja California Sur">Baja California Sur</option>
<option value="Campeche">Campeche</option>
<option value="Chiapas">Chiapas</option>
<option value="Chihuahua">Chihuahua</option>
<option value="CDMX">Ciudad de México</option>
<option value="Coahuila">Coahuila</option>
<option value="Colima">Colima</option>
<option value="Durango">Durango</option>
<option value="Estado de México">Estado de México</option>
<option value="Guanajuato">Guanajuato</option>
<option value="Guerrero">Guerrero</option>
<option value="Hidalgo">Hidalgo</option>
<option value="Jalisco">Jalisco</option>
<option value="Michoacán">Michoacán</option>
<option value="Morelos">Morelos</option>
<option value="Nayarit">Nayarit</option>
<option value="Nuevo León">Nuevo León</option>
<option value="Oaxaca">Oaxaca</option>
<option value="Puebla">Puebla</option>
<option value="Querétaro">Querétaro</option>
<option value="Quintana Roo">Quintana Roo</option>
<option value="San Luis Potosí">San Luis Potosí</option>
<option value="Sinaloa">Sinaloa</option>
<option value="Sonora">Sonora</option>
<option value="Tabasco">Tabasco</option>
<option value="Tamaulipas">Tamaulipas</option>
<option value="Tlaxcala">Tlaxcala</option>
<option value="Veracruz">Veracruz</option>
<option value="Yucatán">Yucatán</option>
<option value="Zacatecas">Zacatecas</option>
</select>
</body>
</html>
@fmagrosoto
Copy link
Author

Hola, que tal. Espero te haya servido.
Para hacer que, al cambiar el valor de select, te cambie la página, en primera, eso se hace desde Javascript y se trata de poner un listener al evento change del campo select.

Entonces, primero debes de poner en una variable al elemento select.

var estados = document.querySelector('select[name=estado]'); // Selecciona el primer elemento select con el nombre = estado

Luego, agregas el listener con todo y el callback incluido a través de una función anónima.

estados.addEventListener('change', function(){
  // Esta es la función anónima
  var estado  = estados.value; // Valor del campo select
  window.location.assign('/ruta/hacia/tu/path/?estado=' + estado);
}, false);

Con esto, al cambiar (seleccionar) algún estado, Javascript lo identifica, lo guarda en una variable y lo manda a una página.
Puede ser cualquier página, puedes hacer algún arreglo con la variable, la puedes concatenar con lo que sea, etc.
window.location.assign() hace el trabajo de enviar a otra página, el URL de esa página va dentro de los paréntesis, como parámetro del método assign.

Ojalá te ayude, saludos.

@jesusjvc
Copy link

Gracias por compartir :)

@cgowez
Copy link

cgowez commented Oct 30, 2020 •
edited
Loading

Gracias.

@ochoarobert1
Copy link

¡Que grande!

@Roppest
Copy link

Roppest commented Dec 10, 2021 •
edited
Loading

Excelente aporte, tengo una sugerencia importante,
Los values incluyen acentos, lo cual podría generar errores en algúnas bases de datos, sugiero cambiar los valores a caracteres más simples cómo las siglas de los estados ej, <option value="QRO">Querétaro</option>

@fmagrosoto
Copy link
Author

@Roppest tienes mucha razón. En realidad, los valores de cada opción deben de ser de tipo INT para que puedas "relacionarlos" con alguna otra tabla donde solicites el Estado de la República. Por lo menos es así como lo utilizo siempre.

@gaositd
Copy link

gaositd commented Mar 8, 2022

Muchas gracias me esta ayudando este listado en un proyecto

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment