Obtenga el valor seleccionado en la lista desplegable usando JavaScript


1784

¿Cómo obtengo el valor seleccionado de una lista desplegable usando JavaScript?

Intenté los siguientes métodos, pero todos devuelven el índice seleccionado en lugar del valor:

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Respuestas:


2928

Si tiene un elemento de selección que se ve así:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

Ejecutando este código:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Lo haría strUserser 2. Si lo que realmente quieres es test2, entonces haz esto:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

Lo que haría strUsersertest2


13
@ R11G, use onchange:)
AlexJaa

142
var strUser = e.options[e.selectedIndex].value;¿Por qué no solo?var strUser = e.value ?
The Red Pea

18
@ TheRedPea, tal vez porque cuando se escribió esta respuesta había una posibilidad (por remota que fuera) de que una versión antigua de Netscape Navigator necesitara ser acomodada, por lo que se utilizó un método igualmente antiguo para acceder al valor de una sola selección. Pero solo estoy adivinando sobre eso. ;-)
RobG

12
Solía ​​así:var e = document.getElementById("ddlViewBy").value;
Fathur Rohim

3
debería ser e.target.options[e.target.selectedIndex].textno sé por qué está mal en todas las respuestas aquí ..
OZZIE

373

JavaScript simple:

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

jQuery:

$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option

AngularJS : ( http://jsfiddle.net/qk5wwyct ):

// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'
}];

1
Debo estar haciendo algo mal porque cuando intento esto, recupero el texto de cada opción en el menú desplegable.
Kevin

66
Esto funcionó para mí de manera diferente. $ ("# ddlViewBy: selected"). val () no sin haber seleccionado
Ruwantha

1
element.options[e.selectedIndex].valuedebe serelement.options[element.selectedIndex].value
Christopher

Sigue siendo útil: ¡gracias por escribir las variaciones / idioma! Ahora, si supiera el equivalente para el menú desplegable API de Office JS ...
Cindy Meister

debería ser e.target.options[e.target.selectedIndex].textno sé por qué está mal en todas las respuestas aquí ..
OZZIE

174
var strUser = e.options[e.selectedIndex].value;

Esto es correcto y debería darle el valor. ¿Es el texto lo que buscas?

var strUser = e.options[e.selectedIndex].text;

Entonces tienes claro la terminología:

<select>
    <option value="hello">Hello World</option>
</select>

Esta opción tiene:

  • Índice = 0
  • Valor = hola
  • Texto = Hola mundo

1
pensé que el ".value" en javascript debería devolver el valor para mí, pero solo el ".text" devolvería lo que devuelve el .SelectedValue en asp.net. Gracias por ejemplo dado!
Fire Hand

1
Sí, haga que el valor de la opción sea igual a lo que es. Más simple: el chico de arriba necesita escribir más código para compensar su vaguedad inicial.
Andrew Koper

debería ser e.target.options[e.target.selectedIndex].textno sé por qué está mal en todas las respuestas aquí ..
OZZIE

62

El siguiente código muestra varios ejemplos relacionados con la obtención / colocación de valores de los campos de entrada / selección utilizando JavaScript.

Enlace fuente

Trabajo Javascript y jQuery Demostración

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

 <select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option value="0">Select</option>
     <option value="8">text1</option>
     <option value="5">text2</option>
     <option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt"  placeholder="Write Something !" onkeyup="up()">

El siguiente script obtiene el valor de la opción seleccionada y la coloca en el cuadro de texto 1

<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>

El siguiente script obtiene un valor de un cuadro de texto 2 y alerta con su valor

<script>
    function up() {
        //if (document.getElementById("srt").value != "") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }
</script>

El siguiente script llama a una función desde una función

<script>
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?
</script>

onchange=run(this.value)o (this.text)puede ser más beneficioso.
Berci


22

Si alguna vez se encuentra con un código escrito exclusivamente para Internet Explorer, puede ver esto:

var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;

Ejecutar lo anterior en Firefox et al le dará un error 'no es una función', porque Internet Explorer le permite salirse con la suya usando () en lugar de []:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

La forma correcta es usar corchetes.


19
<select id="Ultra" onchange="alert(this.value)"> 
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

Cualquier campo de entrada / formulario puede usar una palabra clave "this" cuando está accediendo desde el interior del elemento. Esto elimina la necesidad de ubicar un formulario en el árbol dom y luego ubicar este elemento dentro del formulario.


Una explicación estaría en orden.
Peter Mortensen

14

Es probable que los principiantes quieran acceder a los valores de una selección con el atributo NAME en lugar del atributo ID. Sabemos que todos los elementos de formulario necesitan nombres, incluso antes de que obtengan identificadores.

Entonces, estoy agregando el getElementByName() solución solo para que los nuevos desarrolladores la vean también.

NÓTESE BIEN. los nombres de los elementos del formulario deberán ser únicos para que su formulario pueda utilizarse una vez publicado, pero el DOM puede permitir que un nombre sea compartido por más de un elemento. Por esa razón, considere agregar ID a los formularios si puede, o sea explícito con los nombres de los elementos del formulario my_nth_select_named_xymy_nth_text_input_named_y .

Ejemplo usando getElementByName:

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

No funciona si my_select_with_name_ddlViewBy es una matriz como my_select_with_name_ddlViewBy []
zeuf

14

Hay dos formas de hacer esto, ya sea usando JavaScript o jQuery.

JavaScript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

O

var ddlViewBy = document.getElementById('ddlViewBy');

var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;

var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;

alert (value); // This will output the value selected

alert (text); // This will output the text of the value selected

jQuery:

$("#ddlViewBy:selected").text(); // Text of the selected value

$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

12

Solo usa

  • $('#SelectBoxId option:selected').text(); para obtener el texto como aparece

  • $('#SelectBoxId').val(); para obtener el valor del índice seleccionado


55
Esto usa jQuery, que no responde la pregunta del OP.
David Meza

9

Las respuestas anteriores aún dejan margen de mejora debido a las posibilidades, la intuición del código y el uso de idversus name. Se puede obtener una lectura de tres datos de una opción seleccionada: su número de índice, su valor y su texto. Este código simple de navegador cruzado hace las tres cosas:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</head>
<body>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>
        </select>
    </form>

    <p id="firstP">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    <script>
    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
    }
     </script>
</body>
</html>

Demostración en vivo: http://jsbin.com/jiwena/1/edit?html,output .

iddebe usarse para fines de maquillaje. Para fines de forma funcional, namesigue siendo válido, también en HTML5, y aún debe utilizarse. Por último, tenga en cuenta el uso de corchetes cuadrados versus redondos en ciertos lugares. Como se explicó anteriormente, solo (las versiones anteriores de) Internet Explorer aceptarán las redondas en todos los lugares.



7

Otra solución es:

document.getElementById('elementId').selectedOptions[0].value

6

Ejecutando ejemplo de cómo funciona:

var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;

document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);
<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3"  selected="selected">test3</option>
</select>

Nota: Los valores no cambian a medida que cambia el menú desplegable, si necesita esa funcionalidad, se implementará un cambio onClick.


¡Buena respuesta para mostrar cómo debe actualizarse el código después de usarse!
Usuario que no es un usuario

5

Puedes usar querySelector.

P.ej

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;

5

Tengo una visión un poco diferente de cómo lograr esto. Por lo general, hago esto con el siguiente enfoque (es una forma más fácil y funciona con todos los navegadores hasta donde yo sé):

<select onChange="functionToCall(this.value);" id="ddlViewBy">
  <option value="value1">Text one</option>
  <option value="value2">Text two</option>
  <option value="value3">Text three</option>
  <option value="valueN">Text N</option>
</select>


4

Para ir junto con las respuestas anteriores, así es como lo hago de una sola vez. Esto es para obtener el texto real de la opción seleccionada. Hay buenos ejemplos para obtener el número de índice ya. (Y para el texto, solo quería mostrarlo de esta manera)

let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

En algunos casos, es posible que necesite usar paréntesis, pero esto sería muy raro.

let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

Dudo que esto se procese más rápido que la versión de dos líneas. Simplemente me gusta consolidar mi código tanto como sea posible.

Desafortunadamente, esto aún recupera el elemento dos veces, lo que no es ideal. Un método que solo tome el elemento una vez sería más útil, pero aún no lo he descubierto, en lo que respecta a hacer esto con una línea de código.


3

Aquí hay una línea de código JavaScript:

var x = document.form1.list.value;

Suponiendo que el menú desplegable llamado lista name="list"e incluido en un formulario con nombre de atributo name="form1".


OP dijo que no funcionó para ellos: "Probé los métodos a continuación, pero todos devuelven el índice seleccionado en lugar del valor: var as = document.form1.ddlViewBy.value;..."
Usuario que no es un usuario

2

Deberías estar usando querySelectorpara lograr esto. Esto también estandariza la forma de obtener valor de los elementos del formulario.

var dropDownValue = document.querySelector('#ddlViewBy').value;

Violín: https://jsfiddle.net/3t80pubr/


1

No sé si soy el que no responde bien la pregunta, pero esto simplemente funcionó para mí: usar un evento onchange () en su html, por ejemplo.

<select id="numberToSelect" onchange="selectNum">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

// javascript

function sele(){
    var strUser = numberToSelect.value;
}

Esto le dará el valor que esté en el menú desplegable de selección por clic


1

La forma más sencilla de hacer esto es:

var value = document.getElementById("selectId").value;

No quiere el valor sino el texto que se muestra en el cuadro de selección
Thanasis

0

Aquí hay una manera fácil de hacerlo en una función onchange:

event.target.options[event.target.selectedIndex].dataset.name


1
Hablando de simplicidad, estaba pensando en esto en lugar de evento
Christian Læirbag

0

Solo haz: document.getElementById('idselect').options.selectedIndex

Entonces obtendré un valor de índice de selección, comenzando en 0.


Esto no está funcionando
Hujjat Nazari

-1

Tratar

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label


-1

Crea un menú desplegable con varias opciones (¡tantas como quieras!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

Hice un poco gracioso. Aquí está el fragmento de código:

<select>
  <option value="RidiculousObject">Banana Shark
  <option value="SuperDuperCoding">select tag and option tag!
  <option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
  <option value="Single">Single Option
</select>  

yay el fragmento funcionó

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.