Obtenga el valor seleccionado en la lista desplegable usando JavaScript

¿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 as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

preguntado el 06 de julio de 09 a las 04:07

28 Respuestas

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 strUser be 2. Si lo que realmente quieres es test2, luego haz esto:

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

Que haría strUser be test2

Respondido 19 Oct 20, 16:10

var strUser = e.options[e.selectedIndex].value; porque no solo var strUser = e.value ? - El guisante rojo

@ 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. ;-) - robar

Usé así: var e = document.getElementById("ddlViewBy").value; - Fthr

debiera ser e.target.options[e.target.selectedIndex].text no sé por qué está mal en todas las respuestas aquí .. - OZZIE

@OZZIE - Mira la declaración de asignación que comienza con var e en la pregunta del OP. Si bien es una convención para e (o event) para representar el eventObject, aquí el OP lo está usando para representar el elemento. - Rounín

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'
}];

respondido 30 mar '19, 03:03

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

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

element.options[e.selectedIndex].value debe ser element.options[element.selectedIndex].value - Christopher

Sigue siendo útil, ¡gracias por escribir las variaciones / idioma! Ahora, si solo supiera el equivalente para Office JS API Dropdown ... - cindy meister

debiera ser e.target.options[e.target.selectedIndex].text no sé por qué está mal en todas las respuestas aquí .. - OZZIE

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

Esto es correcto y debería darle el valor. ¿Es el 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

Respondido 06 Jul 09, 08:07

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! - Mano de fuego

Sí, haga que el valor de la opción sea el mismo que el que tiene. Más simple: el tipo de arriba necesita escribir más código para compensar su vaguedad inicial. - andres koper

debiera ser e.target.options[e.target.selectedIndex].text no sé por qué está mal en todas las respuestas aquí .. - OZZIE

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

Acoplar Demostración de Javascript y jQuery

enter image description here

enter image description here

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

respondido 18 nov., 19:06

onchange=run(this.value) or (this.text) puede ser más beneficioso. - cuna

var selectedValue = document.getElementById("ddlViewBy").value;

Respondido 25 Oct 13, 14:10

Esta es la solución más simple, al menos para los navegadores modernos. Ver también W3Schools. - erik koopmans

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.

Respondido 10 Jul 19, 15:07

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

Respondido 10 Jul 19, 15:07

Una explicación estaría en orden. - Pedro Mortensen

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'

Respondido 10 Jul 19, 15:07

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

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_x y 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;

Respondido el 24 de diciembre de 20 a las 23:12

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

Sólo tiene que utilizar

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

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

Respondido el 06 de junio de 14 a las 15:06

Esto usa jQuery, que no responde a la pregunta del OP. - david meza

Las respuestas anteriores aún dejan margen de mejora debido a las posibilidades, la intuición del código y el uso de id frente a 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 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>

Demo en vivo: http://jsbin.com/jiwena/1/edit?html,output .

id debe usarse con fines de maquillaje. Para propósitos de forma funcional, name sigue 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 en ciertos lugares. Como se explicó anteriormente, solo (las versiones anteriores de) Internet Explorer aceptarán los redondos en todos los lugares.

Respondido 10 Jul 19, 15:07

Usando jQuery:

$('select').val();

Respondido el 10 de junio de 19 a las 13:06

Otra solucion es:

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

Respondido 10 Jul 19, 15:07

Para los propietarios de Istanbul E-pass el Museo de Madame Tussauds de Estambul es no es compatible con varios navegadores. - Bharata

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.

Respondido 02 ago 17, 14:08

¡Buena respuesta para mostrar cómo se debe actualizar el código después de su uso! - Reinstalar Monica3167040

Puede usar el querySelector.

P.ej

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

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

Respondido el 04 de enero de 18 a las 22:01

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>

Respondido 10 Jul 19, 15:07

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.

Respondido el 09 de enero de 20 a las 18:01

La forma más sencilla de hacer esto es:

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

Respondido 01 Abr '20, 13:04

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

Creo que esta es la respuesta real que la mayoría de la gente busca. - Zack Plauche

¡Buena respuesta! Fue útil dilip agheda

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

e.opciones.selectedIndex

Respondido 01 Jul 16, 02:07

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 atributo de nombre name="form1".

contestado el 21 de mayo de 17 a las 12:05

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;... "- Reinstalar Monica3167040

Deberías estar usando querySelector 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/

Respondido el 16 de enero de 20 a las 23:01

En navegadores más modernos, querySelector nos permite recuperar la opción seleccionada en una declaración, utilizando el :checked pseudoclase. 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>

Respondido el 08 de junio de 20 a las 21:06

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

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

Respondido 16 Abr '14, 21:04

Hablando de simplicidad, estaba pensando en este en lugar de evento.objetivo - Christian Laeirbag

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

Respondido el 29 de enero de 20 a las 13:01

Trata

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>

contestado el 01 de mayo de 20 a las 11:05

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.

Respondido el 02 de diciembre de 20 a las 11:12

¡Gran respuesta, gracias! En mi caso, tengo dos selectores, pero pude acceder a la identificación del selector con 'e.srcElement.id' - Dominic Smith

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

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

Respondido el 22 de diciembre de 18 a las 15:12

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ó

contestado el 20 de mayo de 20 a las 09:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.