Recuperando el texto de la <opción> seleccionada en el elemento <seleccionar>

156

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?

CountZero
fuente

Respuestas:

258
function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('test');
Sean Bright
fuente
javascript brillante como siempre!
doniyor
3
Esta respuesta está desactualizada, vea la respuesta de @ davidjb a continuación para obtener una buena línea de HTML5.
Christallkeks
1
@Christallkeks: el one-liner lanza una excepción si no se selecciona nada . menos líneas no siempre es mejor.
Sean Bright
88

Si usa jQuery, puede escribir el siguiente código:

$("#selectId option:selected").html();
arturgrigor
fuente
30
ya que quiere el texto, probablemente mejor usarlo.text()
Muhd
55
No debe confundirse con $("#selectId option[selected]"), lo que seleccionará la opción que tiene el atributo "seleccionado" pero podría no estar seleccionado actualmente.
mowwwalker
parece más complicado!
NDEthos
54
document.getElementById('test').options[document.getElementById('test').selectedIndex].text;
gusano
fuente
También funcionó para mí, después de probar todas las demás opciones.
mimi
este wordk perfecto!
Albert Hidalgo
29

En HTML5 puedes hacer esto:

document.getElementById('test').selectedOptions[0].text

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.

davidjb
fuente
+1, mientras tanto, este es el camino a seguir. El ticket de Firefox es fijo e incluso me molesté en abrir MS Edge para verificar que también lo admitieran.
Christallkeks
7

La optionspropiedad contiene todos los elementos <options>: desde allí puede ver.text

document.getElementById('test').options[0].text == 'Text One'
Greg
fuente
6

Puede usar selectedIndexpara recuperar el actual seleccionado option:

el = document.getElementById('elemId')
selectedText = el.options[el.selectedIndex].text
jamshid
fuente
4

this.options [this.selectedIndex] .innerText

Phani CR
fuente
2

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:

alert(event.target.options[event.target.selectedIndex].text);
ceros y unos
fuente
1

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.

<select onchange="alert(this.options[this.selectedIndex].innerHTML);">
       <option value="">Select Actions</option>
       <option value="1">Print PDF</option>
       <option value="2">Send Message</option>
       <option value="3">Request Review</option>
       <option value="4">Other Possible Actions</option>
    </select>
Creeperstanson
fuente
Agregue alguna explicación
HaveNoDisplayName
.innerHTMLobtiene 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.
hipkiss
1
¿Cuántos "niños" espera tener entre sus etiquetas <option> Niños? </option>?
Creeperstanson
0

Similar a @artur solo sin jQuery, con javascript simple:

// Usando la variable "elt" de @ Sean-bright

var selection=elt.options[elt.selectedIndex].innerHTML;
viditkothari
fuente
0

Manera fácil, simple:

const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;
Paweł Bednarczyk
fuente
1
Si bien este fragmento de código puede resolver el problema, no explica por qué o cómo responde la pregunta. Por favor, incluya una explicación de su código , como que realmente ayuda a mejorar la calidad de su puesto. Recuerde que está respondiendo la pregunta para los lectores en el futuro, y que esas personas podrían no conocer los motivos de su sugerencia de código.
Luca Kiebel
No veo cómo esto es fácil o simple. ¿Por qué usarías find()cuando ya conoces el índice del elemento seleccionado? Además, si no hay un elemento seleccionado ( <select multiple>), esto generará un error.
Sean Bright