3

Deseo obtener el valor (.value) o el texto (.text) de la opción elegida de una lista despegable de un select en un formulario.

¿Cómo accedo al texto de la selección marcada?

Código HTML del elemento select:

<select name="provincia" id="provincia">

Código Javascript:

//Guardamos en una variable el nombre del campo provincia.
var idprovincia = document.getElementById("idprovincia");
var pro = idprovincia.options[idprovincia.selectedIndex].value;
//Creamos un nodo de texto que agregaremos al div.
var pro_valor = document.createTextNode("Provincia: "+pro);
//Añadimos el nuevo nodo al final de la lista.
div.appendChild(pro_valor);

4 respuestas 4

11

Con la propiedad text del option seleccionado.

En tu código estás accediendo al valor de la opción seleccionada a través de la propiedad value. De igual forma a través de la propiedad text puedes acceder al texto de la opcion:

var select = document.getElementById('provincia');
select.addEventListener('change',
  function(){
    var selectedOption = this.options[select.selectedIndex];
    console.log(selectedOption.value + ': ' + selectedOption.text);
  });
<select name="provincia" id="provincia">
  <option value="" disabled selected>Seleccione una Provincia...</option>
	<option value="AB">Albacete</option>
	<option value="AL">Almería</option>
	<option value="AR">Araba</option>
	<option value="AV">Ávila</option>
	<option value="BA">Badajoz</option>
</select>

2
  • El problema viene a la hora de elegir el valor inicial del select cuyo texto es "Seleccione una provincia", éste valor no debería ser imprimible, osea, debería controlarse. Este valor me sale ya que en el HTML tengo el siguiente código: "<option value="cargar_provincias();">Seleccione una Provincia...</option>"
    – omaza1990
    Commented el 22 may. 2017 a las 20:17
  • Pero ¿por qué metes código en el value? He modificado el ejemplo para añadir una opción "Seleccione una Provincia.." deshabilitada. De esta forma en el momento que el usuario selecciona cualquier otra opción ya no puede volver a seleccionar ésta. Commented el 22 may. 2017 a las 20:39
2

Tal como lo tienes funciona bien si no te equivocaste al copiarlo hay una errata en var idprovincia = document.getElementById("idprovincia"); el id sobra sería var idprovincia = document.getElementById("provincia");

3
  • El problema viene a la hora de elegir "Seleccione una provincia..." siendo ésta una opción del "select" aunque su valor no debería de existir.
    – omaza1990
    Commented el 22 may. 2017 a las 20:14
  • si esta opción siendo la primera le das un value de 0 por ejemplo, puedes cuando se dispare el evento quitar dicha opción con idprovincia.options[0].remove();
    – Xavi
    Commented el 22 may. 2017 a las 20:43
  • si explicas un poco mejor donde esta el problema te digo, porque he probado tú código y a mí me funciona perfecto
    – Xavi
    Commented el 22 may. 2017 a las 20:48
1

    $("#estado").change(function(){
      var estado = $("#estado").val();
      alert(estado);
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select name="estado" id="estado">
  <option value="" disabled selected>Seleccione un Estado...</option>
    <option value="México">México</option>
    <option value="Aguascalientes">Aguascalientes</option>
    <option value="Campeche">Campeche</option>
    <option value="Chiapas">Chiapas</option>
    <option value="Durango">Durango</option>
</select>

0

window.onload = function() {
  imprimirValor();
}

function imprimirValor(){
  var select = document.getElementById("feedingHay");
  var options=document.getElementsByTagName("option");
  console.log(select.value);
  console.log(options[select.value-1].innerHTML)
}
<form action="feeding" method="post">
    <select id="feedingHay" onChange="imprimirValor()">
       <option value="1">Hola</option>
       <option value="2">Como</option>
       <option value="3">Estas</option>
       <option value="4">Amigo</option>
       <option value="5">!</option>
   </select>

 
</form>

3
  • No hace lo que se pide. Siempre muestra el valor "1". ¿Y si cambias varias veces por qué no aparecen los demás valores?
    – omaza1990
    Commented el 22 may. 2017 a las 20:07
  • por que solo muestra el mensaje cuando la pagina se carga, si quieres que lo haga cada vez que cambia el select pues hay que asignarle un evento. Pero tu tampoco especificas muy bien tu pregunta. Lo edito para que veas como sería.
    – Luis
    Commented el 22 may. 2017 a las 20:18
  • Sí, el evento "onchange" por ejemplo.
    – omaza1990
    Commented el 22 may. 2017 a las 20:19

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.