Obtenga el valor seleccionado en la lista desplegable usando JavaScript

2048

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

Probé los métodos a continuación, pero todos devuelven el índice seleccionado en lugar del valor:

var e = document.getElementById("ddlViewBy");
function show(){
  var as = document.forms[0].ddlViewBy.value;
  var strUser = e.options[e.selectedIndex].value;
  console.log(as, strUser);
}
e.onchange=show;
show();
<form>
  <select id="ddlViewBy">
    <option value="1">test1</option>
    <option value="2" selected="selected">test2</option>
    <option value="3">test3</option>
  </select>
</form>
0
3292

Si tiene un elemento seleccionado que se parece a esto:

<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.value;

Haría que strUsersea 2. Si lo que realmente quieres es test2, haz esto:

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

Lo que haría strUsersertest2

12
  • 157
    var strUser = e.options[e.selectedIndex].value;por qué no solovar strUser = e.value ?The Red Pea 31/12/14 a las 0:01
  • 24
    @ TheRedPea: tal vez porque cuando se escribió esta respuesta existía la posibilidad (por remota que fuera) de que fuera necesario incorporar una versión antigua de Netscape Navigator, 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 18 de enero de 2015 a las 4:06
  • 13
    Usé así:var e = document.getElementById("ddlViewBy").value;Fthr 25/10/2016 a las 16:16
  • 4
    debería ser e.target.options[e.target.selectedIndex].textno sé por qué está mal en todas las respuestas aquí ..OZZIE 2 de ene. De 2019 a las 11:10
  • 2
    @OZZIE: mire la declaración de asignación que comienza con var ela pregunta del OP. Si bien es una convención para e(o event) representar el eventObject, aquí el OP lo está usando para representar el elemento. Rounin 28/01/20 a las 14:24
420

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'
}];
6
  • 2
    Debo estar haciendo algo mal porque cuando intento esto, obtengo el texto de cada opción en el menú desplegable. Kevin 6 de junio de 2013 a las 21:18
  • 6
    Esto funcionó para mí de una manera diferente. $ ("# ddlViewBy: selected"). val () no sin seleccionadoRuwantha 14 de agosto de 2013 a las 8:07
  • 1
    element.options[e.selectedIndex].valuedebe serelement.options[element.selectedIndex].valueChristopher 27/03/15 a las 15:18
  • Sigue siendo útil, ¡gracias por escribir las variaciones / idioma! Ahora, si solo supiera el equivalente para Office JS API Dropdown ...Cindy Meister 1 mar 18 a las 18:21
  • debería ser e.target.options[e.target.selectedIndex].textno sé por qué está mal en todas las respuestas aquí ..OZZIE 2 de ene. De 2019 a las 11:10
182
var strUser = e.options[e.selectedIndex].value;

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

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

Entonces tienes clara la terminología:

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

Esta opción tiene:

  • Índice = 0
  • Valor = hola
  • Texto = Hola mundo
3
  • 1
    Pensé que el ".value" en javascript debería devolver el valor para mí, pero solo el ".text" devolvería lo que devuelve .SelectedValue en asp.net. Gracias por ejemplo dado! Fire Hand 6 de julio de 2009 a las 7:56
  • 1
    Sí, haga que el valor de la opción sea el mismo que es. Más simple: el tipo de arriba necesita escribir más código para compensar su vaguedad inicial. Andrew Koper 27 de agosto de 2013 a las 15:00
  • debería ser e.target.options[e.target.selectedIndex].textno sé por qué está mal en todas las respuestas aquí ..OZZIE 2 de ene. De 2019 a las 11:10
67

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

Enlace de origen

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 lo coloca en el cuadro de texto 1

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

La siguiente secuencia de comandos 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>
1
  • onchange=run(this.value)o (this.text)puede ser más beneficioso. Berci 24 de enero de 2020 a las 23:53
47
var selectedValue = document.getElementById("ddlViewBy").value;
1
  • 5
    Esta es la solución más simple, al menos para los navegadores modernos. Consulte también W3Schools . Erik Koopmans 11 de septiembre de 2018 a las 2:14
24

Si alguna vez se encuentra con código escrito exclusivamente para Internet Explorer, es posible que vea 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 utilizar corchetes.

20
<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 accede a él 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.

1
  • Una explicación estaría en orden. Peter Mortensen 10/07/19 a las 14:08
17

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'
16

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 la getElementsByName()solución solo para que los nuevos desarrolladores también la vean.

NÓTESE BIEN. Los nombres de los elementos del formulario deberán ser únicos para que su formulario se pueda usar 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_xy my_nth_text_input_named_y.

Ejemplo usando getElementsByName:

var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;
1
  • No funciona si my_select_with_name_ddlViewBy es una matriz como my_select_with_name_ddlViewBy []zeuf 9/12/2017 a las 17:44
12

Solo usa

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

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

1
  • 6
    Esto usa jQuery, que no responde a la pregunta del OP. David Meza 28 de marzo de 2016 a las 18:09
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 para varios navegadores 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 con fines de maquillaje. Para fines de forma funcional, namesigue siendo válido, también en HTML5, y debería seguir utilizándose. Por último, tenga en cuenta el uso de corchetes en lugar de corchetes redondos en ciertos lugares. Como se explicó anteriormente, solo (las versiones anteriores de) Internet Explorer aceptarán los redondos en todos los lugares.

8

Usando jQuery:

$('select').val();
8

Otra solucion es:

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

La forma más sencilla de hacer esto es:

var value = document.getElementById("selectId").value;
3
  • No quiere el valor, sino el texto que se muestra en el cuadro de selecciónThanasis 20 abr.20 a las 13:17
  • Creo que esta es la respuesta real que la mayoría de la gente busca. Zack Plauché 4 jul.20 a las 14:00
  • 2
    ¡Buena respuesta! Era útilDilip Agheda 28/08/20 a las 23:50
6

Ejecución de un 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 se cambia el menú desplegable, si necesita esa funcionalidad, se debe implementar un cambio de onClick.

1
  • ¡Buena respuesta para mostrar cómo se debe actualizar el código después de su uso! ReinstateMonica3167040 16 de julio de 2018 a las 23:36
5

Puede utilizar 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 que yo sepa):

<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>
5

Para estar de acuerdo con las respuestas anteriores, así es como lo hago en una sola línea. Esto es para obtener el texto real de la opción seleccionada. Ya hay buenos ejemplos para obtener el número de índice. (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 excepcionales, es posible que deba usar paréntesis, pero esto sería muy raro.

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

Dudo que este proceso sea 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 todavía recupera el elemento dos veces, lo que no es ideal. Un método que solo toma 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.

4

En 2015, en Firefox , también funciona lo siguiente.

e.options.selectedIndex

3

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

var x = document.form1.list.value;

Suponiendo que el menú desplegable se llama lista name="list"y se incluye en un formulario con atributo de nombre name="form1".

1
  • OP dijo que eso 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;..."ReinstateMonica3167040 16 de julio de 2018 a las 23:38
3

En navegadores más modernos, querySelectornos permite recuperar la opción seleccionada en una declaración, usando la :checkedpseudoclase . De la opción seleccionada, podemos recopilar cualquier información que necesitemos:

const opt = document.querySelector('#ddlViewBy option:checked');
// opt is now the selected option, so
console.log(opt.value, 'is the selected value');
console.log(opt.text, "is the selected option's text");
<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>
3

No sé si soy yo el que no responde bien la pregunta, pero esto simplemente funcionó para mí: use 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 selectNum(){
    var strUser = numberToSelect.value;
}

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

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/

2

Tratar

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );
<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>
2

event.target.value dentro de la devolución de llamada onChange funcionó para mí.

1

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

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

1
  • 1
    Hablando de simplicidad, estaba pensando en esto en lugar de event.targetChristian Læirbag 10/02/2016 a las 22:32
1

Creo que puede adjuntar un detector de eventos a la etiqueta de selección en sí, por ejemplo:

<script>
  document.addEventListener("DOMContentLoaded", (_) => {
    document.querySelector("select").addEventListener("change", (e) => {
      console.log(e.target.value);
    });
  });
</script>

En este escenario, debe asegurarse de tener un atributo de valor para todas sus opciones y que no sean nulas.

1
  • ¡Gran respuesta, gracias! En mi caso, tengo dos selectores, pero pude acceder a la identificación del selector con 'e.srcElement.id'Dominic Smith 23 dic.20 a las 15:14
0

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

Entonces obtendré el valor de índice seleccionado, comenzando en 0.

0
-1

Haz 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 hilarante. 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ó