Obtenga el valor seleccionado en la lista desplegable usando JavaScript

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

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

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

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

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

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

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

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.

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

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;

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'

Solo usa

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

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

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.

Usando jQuery:

$('select').val();

Otra solución es:

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

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.

Puedes usar querySelector.

P.ej

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

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

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>

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

mi. opciones .selectedIndex

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.

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

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/

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

La forma más sencilla de hacer esto es:

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

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

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

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

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

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>

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ó