Hacer Pregunta

Conecta

2votos

¿Como puedo hacer un alert para un select de municipios en js?

preguntó
Web
3232 Vistas
2 Respuestas
abierta

Codigo HTML

          <form action="" class="row">
              <div class="input-field col s12 m12 l6">
                  <select id="estado" name="estado"></select>
                  <label for="estado"></label>
              </div>
              <div class="input-field col s12 m12 l6">
                  <select id="municipio" name="municipio"></select>
                  <label for="municipio"></label>
              </div>
                <button type="button" id="btn_buscar" >BUSCAR</button>
          </form>

Y en mi documento JS tengo todos los municipios ¿como puedo hacer un alert para ver que municipio escojio el usuario?

por Miller (410 puntos) en Web

2 Respuestas

3votos

FelipeMedel Puntos7400

no se si entiendo bien tu pregunta, pero mostrar un alert con la información del select con Javascript no es muy complicado, aqui te dejo un ejemplo en base a lo que mostraste, obteniendo el Value y el Texto del SELECT

<!DOCTYPE html>
<html>
<head>
  <title>prueba</title>

<script type="text/javascript">
  function mostrarSeleccionado(){
  /* Para obtener el valor */
  var cod = document.getElementById("municipio").value;
  alert(cod);

  /* Para obtener el texto */
  var combo = document.getElementById("municipio");
  var selected = combo.options[combo.selectedIndex].text;
  alert(selected);
  }
</script>

</head>
<body>
  <form action="" class="row">

      <div class="input-field col s12 m12 l6">
          <select id="municipio" name="municipio" onchange="mostrarSeleccionado()">
            <option value='primero'>primer registro</option>
            <option value='segundo'>segundo registro</option>
            <option value='tercero'>tercero registro</option>
            <option value='ultimo'>ultimo registro</option>
          </select>
      </div>

  </form>
</body>
</html>

Espero sea de utilidad y te permita solucionar tu problema!!! me comentas...

por FelipeMedel (7.400 puntos)

2votos

Miller comentado

Pero los <option> no los tengo en mi documento HTML solo tengo esto: 

          <form action="" class="row">
              <div class="input-field col s12 m12 l6">
                  <select id="estado" name="estado"></select>
                  <label for="estado"></label>
              </div>
              <div class="input-field col s12 m12 l6">
                  <select id="municipio" name="municipio"></select>
                  <label for="municipio"></label>
              </div>
                <button type="button" id="btn_buscar" >BUSCAR</button>
          </form>

Y en otro documento de JS tengo el código para cargar los municipios y el estado:

$(document).ready(function(){
    // Cargamos los estados
    var estados = "<option value='' disabled selected>Selecciona el estado</option>";

    for (var key in municipios) {
        if (municipios.hasOwnProperty(key)) {
            estados = estados + "<option value='" + key + "'>" + key + "</option>";
        }
    }

    $('#estado').html(estados);

    // Al detectar
    $( "#estado" ).change(function() {
        var html = "<option value='' disabled selected>Selecciona el municipio</option>";
        $( "#estado option:selected" ).each(function() {
            var estado = $(this).text();
            if(estado != "Selecciona el estado"){
                var municipio = municipios[estado];
                for (var i = 0; i < municipio.length; i++)
                    html += "<option value='" + municipio[i] + "'>" + municipio[i] + "</option>";
            }
        });
        $('#municipio').html(html);
        $('select').material_select('update');
    })
    .trigger( "change" );
});

Y en otro documento de JS tengo todos los municipios y solo es un estado

var municipios = {
                "DISTRITO FEDERAL":[
                        "Alvaro Obregón",
                        "Azcapotzalco",
                        "Benito Juárez",
                        "Coyoacán",
                        "Cuajimalpa de Morelos",
                        "Cuauhtémoc",
                        "Gustavo A. Madero",
                        "Iztacalco",
                        "Iztapalapa",
                        "La Magdalena Contreras",
                        "Miguel Hidalgo",
                        "Milpa Alta",
                        "Tláhuac",
                        "Tlalpan",
                        "Venustiano Carranza",
                        "Xochimilco"
                    ],
            }

Y quiero saber cuando el usuario elija algún municipio, que municipio escojio (el select es dinamico)

por Miller (410 puntos)
editado por

2votos

FelipeMedel Puntos7400

es muy simple, seria algo asi para el ejemplo que hice:

archivo inicio.html

<!DOCTYPE html>
<html>
<head>
  <title>prueba</title>
  <script src="inicio.js"></script>
</head>
<body>
  <form action="" class="row">

      <div class="input-field col s12 m12 l6">
          <select id="municipio" name="municipio" onchange="mostrarSeleccionado()">
            <option value='primero'>primer registro</option>
            <option value='segundo'>segundo registro</option>
            <option value='tercero'>tercero registro</option>
            <option value='ultimo'>ultimo registro</option>
          </select>
      </div>

  </form>
</body>
</html>

y ahora el archivo inicio.js

function mostrarSeleccionado(){

  /* Para obtener el valor */
   cod = document.getElementById("municipio").value;
   alert(cod);

  /* Para obtener el texto */
  combo = document.getElementById("municipio");
  selected = combo.options[combo.selectedIndex].text;
  alert(selected);

 }

Espero te sirva...

por FelipeMedel (7.400 puntos)

1voto

Miller comentado

Gracias amigo, si me sirvio, mil gracias!!!

por Miller (410 puntos)

2votos

FelipeMedel comentado

vale amigo, puedes dar por terminada la pregunta si te funciono... saludos

por FelipeMedel (7.400 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta