Pregunta Obtener 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;
var value = document.getElementById("ddlViewBy").value;

1370
2017-07-06 07:25


origen


Respuestas:


Si tiene un elemento seleccionado 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;

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

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

Lo cual haría strUser ser test2


2330
2017-07-06 07:29



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

280
2017-12-18 02:08



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

155
2017-07-06 07:29



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

Trabajando MANIFESTACIÓ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 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>

La siguiente secuencia de comandos 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>

47
2017-12-03 06:50



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

21
2017-10-25 13:27



Si alguna vez se encuentra con código escrito puramente para IE, 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 IE 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.


18
2018-06-18 15:28



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

12
2018-04-14 13:45



Solo usa

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

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


11
2018-02-18 11:01



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

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

NÓTESE BIEN. los nombres de los elementos del formulario deberán ser únicos para que su formulario se pueda utilizar una vez publicados, pero el DOM puede permitir que un nombre sea compartido por más de un elemento. Por ese motivo, considere agregar ID a los formularios si puede, o explíquese con los nombres de los elementos del formulario. my_nth_select_named_x y my_nth_text_input_named_y.

Ejemplo de uso getElementByName:

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

11
2018-03-09 03:32



Las respuestas anteriores aún permiten mejorar debido a las posibilidades, la intuición del código y el uso de id versus name. Uno 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>

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

id debe usarse con fines de maquillaje. Para fines de forma funcional, name sigue siendo válido, también en HTML5, y aún debe ser utilizado. Por último, tenga en cuenta el uso de corchetes cuadrados versus redondos en ciertos lugares. Como se explicó anteriormente, solo (versiones anteriores de) IE aceptará redondas en todos los lugares.


7
2018-05-22 02:42