una - ¿Obtener valor seleccionado en la lista desplegable utilizando JavaScript?

obtener valor seleccionado combobox html

Question

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

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

Answer 1

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

var x = document.form1.list.value;

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

Answer 2

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

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

Answer 3

Consulte el artículo Selección de elemento desplegable mediante JavaScript o jQuery . Lo han explicado de muchas maneras usando JavaScript y jQuery.

Usando jQuery:

$(‘select’).val();

Answer 4

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

Answer 5

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

DEMO trabajo

 <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()">

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

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 está llamando 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>

Answer 6

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

mi. opciones .selectedIndex

Answer 7

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

Por lo tanto, estoy agregando la solución getElementByName() solo para que lo vean los nuevos desarrolladores.

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 de formulario my_nth_select_named_x y my_nth_text_input_named_y .

Ejemplo usando getElementByName :

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

Answer 8

Hay dos formas de hacer esto usando JavaScript o JQuery .

JavaScript:

var getValue = document.getElementsById(''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''

Answer 9

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

Answer 10

La única razón por la que puedo ver que hace que este código no funcione es si está utilizando IE7-, y olvidó especificar el atributo de valor para su <option> -tags ... Todos los demás navegadores deben convertir lo que está dentro de las etiquetas de apertura-cierre El valor de la opción.

Answer 11

Las respuestas anteriores aún dejan espacio para mejoras debido a las posibilidades, la intuición del código y el uso de id contra 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 simple código de navegador cruzado hace los tres:

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

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

Answer 12

Otra solución es:

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

Answer 13

Para estar de acuerdo con las respuestas anteriores, así es como lo hago como una sola línea. 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 mostrar de esta manera)

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

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

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

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

Si alguien sabe cómo hacer esto en una línea sin tener que obtener el elemento dos veces, me encantaría que me comentara y me mostrara cómo hacerlo. Todavía no he podido darme cuenta de eso ...

Answer 14

Puede usar selectElement.value para obtener el valor de la opción seleccionada de la selección.

document.getElementById("idOfSelect").value;

var res = document.querySelector(''p'');
var select = document.querySelector(''select'');
res.textContent = "Selected Value: "+select.value;
select.addEventListener("change", function(e){
  res.textContent = "Selected Value: "+select.value;
});

<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Change value of the select to show the value.
<p>
</p>

Answer 15

Puede utilizar querySelector .

P.ej

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

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

Answer 16

Si alguna vez te encuentras con un código escrito exclusivamente para IE, puedes ver esto:

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

Ejecutar lo anterior en Firefox y otros le dará un error ''no es una función'' porque IE le permite usar () en lugar de []:

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

La forma correcta es utilizar corchetes.

Answer 17

Si tienes 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;

Haría que strUser fuera 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 que strUser fuera test2

Answer 18

Solo usa

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

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

Answer 19

Tengo una visión un poco diferente, cómo lograr esto. Normalmente 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> 

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

Answer 21

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

Answer 22

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;

Así que tienes clara la terminología:

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

Esta opción tiene:

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