Cómo obtener el texto seleccionado del cuadro de selección de Javascript

79

Esto funciona perfectamente

<select name="selectbox" onchange="alert(this.value)">

Pero quiero seleccionar el texto. Lo intenté de esta manera

<select name="selectbox" onchange="alert(this.text)">

Se muestra indefinido. Descubrí cómo usar DOM para obtener texto. Pero quiero hacer esto de esta manera, me refiero a usar solo this.value.

javascript select

— Aajahid
fuente

126

this.options[this.selectedIndex].innerHTML

debe proporcionarle el texto "mostrado" del elemento seleccionado. this.value, como dijiste, simplemente proporciona el valor del valueatributo.

— Delan Azabani
fuente

6

No me gusta Si bien estoy seguro de que funciona en los navegadores actuales, es una extraña mezcla de código basado en elementos DOM y código de manipulación de formularios de estilo antiguo. optionsdevuelve una lista de Optionobjetos, que no estoy seguro de que estén especificados en algún lugar para ser lo mismo que los <option>elementos. Es mejor usar la textpropiedad tradicional del seleccionado Option, que está garantizado para funcionar.

— Tim Down

Tim, los Optionobjetos son lo mismo que los HTMLOptionElementobjetos. Si se opone al uso options, puede usar alternativamente childreno en su childNodeslugar (no puedo recordar exactamente cuál; creo que ambos funcionan)

— Delan Azabani

1

Creo que lo malinterpreta un poco: estoy totalmente a favor del uso options, pero los Optionobjetos son anteriores a los HTMLOptionElementobjetos y no hay ninguna especificación que haya visto que exija eso Optiony HTMLOptionElementdebe ser lo mismo, aunque pueden estar en la mayoría de los navegadores que admiten ambos. Mi punto es que sería más seguro no mezclar los dos estilos. Por lo tanto, preferiría this.options[this.selectedIndex].texto una cosa basada en nodos selectedIndex, lo cual se complica por la necesidad de filtrar los nodos de texto de espacio en blanco en IE.

— Tim Down

Ese es un buen punto. Solo por curiosidad, si tiene nodos que no son de texto dentro de los nodos de opción, ¿ textdevuelve el innerHTML, o solo todos los nodos de texto combinados?

— Delan Azabani

1

¡Dios mío, dejen de votar por la incompetencia! Oded tiene la respuesta correcta. ¿Qué tan difícil es investigar el concepto de DOM? > __>

— Juan

68

Para obtener el valor del artículo seleccionado, puede hacer lo siguiente:

this.options[this.selectedIndex].text

Aquí optionsse accede a los diferentes de los seleccionados, y SelectedIndexse utiliza para elegir el seleccionado, luego textse accede a él.

Lea más sobre el DOM seleccionado aquí .

— Oded
fuente

1

this.options[this.selectedIndex].valuees exactamente lo mismo que this.value, lo siento.

— Delan Azabani

Cuando uso this.options [this.SelectedIndex]. La consola de error de texto dice - Error: this.options [this.SelectedIndex] no está definido

— Aajahid

3

SHAKTI: Eso es porque es en selectedIndexlugar de SelectedIndex.

— Tim Down

2

O, simplemente por diversión, this.selectedOptions[0].text(con extensiones obvias si tiene una selección múltiple).

— ruffin

37

Pruebe este código:

$("#YourSelect>option:selected").html()

— André Morata
fuente

¡Así que gracias! esto devuelve el valor del elemento seleccionado en el cuadro combinado

— saber tabatabaee yazdi

.text () en realidad devuelve el texto seleccionado

— Windrider

33

Solo usa

$('#SelectBoxId option:selected').text(); Para obtener texto como se indica

$('#SelectBoxId').val(); Para obtener el valor de índice seleccionado

— Marvil Joy
fuente

2

Si bien esto funciona perfectamente para jQuery, el OP solo enumeró javascript como una etiqueta original. Aún así, +1 ya que mucha gente usa jQuery.

— Sablefoste

1

Sé que nadie está pidiendo una solución de jQuery aquí, pero valdría la pena mencionar que con jQuery solo puede solicitar:$('#selectorid').val()

— Michiel
fuente

0

Si desea obtener el valor, puede usar este código para un elemento de selección con id = "selectBox"

let myValue = document.querySelector("#selectBox").value;

Si desea obtener el texto, puede usar este código

var sel = document.getElementById("selectBox");
var text= sel.options[sel.selectedIndex].text;

— Michael Albers
fuente