En el siguiente:
<select id="test">
<option value="1">Test One</option>
<option value="2">Test Two</option>
</select>
¿Cómo puedo obtener el texto de la opción seleccionada (es decir, "Prueba uno" o "Prueba dos") usando JavaScript
document.getElementsById('test').selectedValue
devuelve 1 o 2, ¿qué propiedad devuelve el texto de la opción seleccionada?
javascript
html
dom
CountZero
fuente
fuente
Si usa jQuery, puede escribir el siguiente código:
fuente
.text()
$("#selectId option[selected]")
, lo que seleccionará la opción que tiene el atributo "seleccionado" pero podría no estar seleccionado actualmente.fuente
En HTML5 puedes hacer esto:
La documentación de MDN en https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions indica soporte completo para navegadores cruzados (al menos a diciembre de 2017), incluidos Chrome, Firefox, Edge y navegadores móviles , pero excluyendo Internet Explorer.
fuente
Referencias
fuente
La
options
propiedad contiene todos los elementos<options>
: desde allí puede ver.text
fuente
Puede usar
selectedIndex
para recuperar el actual seleccionadooption
:fuente
this.options [this.selectedIndex] .innerText
fuente
Si encontró este hilo y desea saber cómo obtener el texto de la opción seleccionada a través del evento, aquí está el código de muestra:
fuente
Use el objeto de la lista de selección para identificar su propio índice de opciones seleccionadas. A partir de ahí, tome el HTML interno de ese índice. Y ahora tienes la cadena de texto de esa opción.
fuente
.innerHTML
obtiene todos los niños y sus atributos. Si bien funciona cuando un elemento no tiene hijos, si tiene un elemento con hijos, devuelve mucho más de lo previsto.Similar a @artur solo sin jQuery, con javascript simple:
// Usando la variable "elt" de @ Sean-bright
fuente
Manera fácil, simple:
fuente
find()
cuando ya conoces el índice del elemento seleccionado? Además, si no hay un elemento seleccionado (<select multiple>
), esto generará un error.