7

No soy muy bueno con javascript por eso quisiera saber como obtengo el nombre de un option al hacer un change:

Ejemplo:

<select id="ciudad">
 <option value="1">Monterrey</option>
 <option value="2">Tijuana</option>
 <option value="3">Mexico D.F</option>
</select>

Se que si hago lo siguiente $(this).val(); y lo imprimo por consola, obtendré el valor del option al realizar el change pero, ¿cómo muestro el nombre?

3 respuestas 3

8

Lo puedes hacer de la siguiente forma:

$('#ciudad').on('change', function(){
  var val = $(this).val();
  var name = $('#ciudad option:selected').text();
  
  console.log(val)
  console.log(name)
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ciudad">
 <option value="1">Monterrey</option>
 <option value="2">Tijuana</option>
 <option value="3">Mexico D.F</option>
</select>

2
  • Excelente Men Gracias.
    – JDavid
    Commented el 22 mar. 2017 a las 20:07
  • 2
    @Daniel con gusto, no te olvides marcar mi respuesta como correcta si te ha solucionado el problema
    – Jorius
    Commented el 22 mar. 2017 a las 20:08
1

Ejemplo:

$('#ciudad').change(function() {
  alert($(this).find('option[value=' + $(this).val() + ']').text())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select id="ciudad">
    <option value="1">Monterrey</option>
    <option value="2">Tijuana</option>
    <option value="3">Mexico D.F</option>
</select>

1

Estimado colega, le dejo una opción en javascript puro, sin necesidad de importar algún tipo de librería. Es una opción que siempre me gusta considerar.

Saludos!.

PS: Código mejorado, gracias a la colaboración de Gustavo García.

function ImprimirEnConsola(elemento){
  var seleccionada = elemento[elemento.selectedIndex].text;
  console.log(seleccionada);
}
<select id="ciudad" onchange="ImprimirEnConsola(this)">
 <option value="1">Monterrey</option>
 <option value="2">Tijuana</option>
 <option value="3">Mexico D.F</option>
</select>

2
  • Si en lugar de pasarle el value del select le pasas el índice del elemento seleccionado, haces ese snippet funcional para todo select. el.options[el.selectedIndex].textContent.
    – gugadev
    Commented el 22 mar. 2017 a las 23:04
  • Listo código mejorado, gracias Gustavo. Saludos! Commented el 23 mar. 2017 a las 19:35

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.