Obtener el valor / texto seleccionado de Seleccionar al cambiar

96
<select onchange="test()" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
</select>

Necesito obtener el valor de la opción seleccionada en javascript: ¿alguien sabe cómo obtener el valor o el texto seleccionado? Por favor, diga cómo escribir una función para él. He asignado la función onchange () para seleccionar, entonces, ¿qué hago después de eso?

Siva
fuente
1
Si sólo desea que el valuedel optionque se seleccionó entonces ... <select onchange="window.alert(this.value);">... options ... </select>... debe conseguir ya sólo eso y nada más.
S0AndS0

Respuestas:

114

Use JavaScript o jQuery para esto.

Usando JavaScript

<script>
function val() {
    d = document.getElementById("select_id").value;
    alert(d);
}
</script>

<select onchange="val()" id="select_id">

Usando jQuery

$('#select_id').change(function(){
    alert($(this).val());
})
Hussein
fuente
.value () funciona en navegadores modernos pero no en navegadores realmente antiguos. Ver bytes.com/topic/javascript/answers/…
Benissimo
2
@PlayHardGoPro Ese es el valor seleccionado. Si quisiera el texto (por ejemplo, -Seleccionar- o Comunicación), usaría texto: select.texto en jQuery select.text().
ricksmt
Falta un punto y coma al final de jquery allí ... :)
lindhe
Usando jQuery $('#select_id option:selected').text(). Esto devolverá el texto de la opción seleccionada, Seleccionar o Comunicación
Paulo Borralho Martins
1
enfoque de JavaScript vanilla: document.getElementById("select_id").onchange = (evt) => { console.log(evt.srcElement.value); }
Spencer
44

Si está buscando en Google y no desea que el detector de eventos sea un atributo, use:

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
});
<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Brandon G
fuente
30

function test(a) {
    var x = (a.value || a.options[a.selectedIndex].value);  //crossbrowser solution =)
    alert(x);
}
<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

el Dude
fuente
lo que es a.valuepara? ¿Existe algún navegador que realmente lo admita? ¿No podemos simplemente usar a.options[a.selectedIndex].value?
Anónimo
@Anonymous <para obtener el subj =)
el Dude
27

No es necesaria una función de cambio. Puede tomar el valor en una línea:

document.getElementById("select_id").options[document.getElementById("select_id").selectedIndex].value;

O divídalo para una mejor legibilidad:

var select_id = document.getElementById("select_id");

select_id.options[select_id.selectedIndex].value;
Danny
fuente
20

Vaya, todavía no hay soluciones realmente reutilizables entre las respuestas ... Quiero decir, un controlador de eventos estándar debería obtener solo un eventargumento y no tiene que usar ID en absoluto ... Yo usaría:

function handleSelectChange(event) {

    // if you want to support some really old IEs, add
    // event = event || window.event;

    var selectElement = event.target;

    var value = selectElement.value;
    // to support really old browsers, you may use
    // selectElement.value || selectElement.options[selectElement.selectedIndex].value;
    // like el Dude has suggested

    // do whatever you want with value
}

Puede usar este controlador con cada - js en línea:

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

jQuery:

jQuery('#select_id').on('change',handleSelectChange);

o la configuración del controlador Vanilla JS:

var selector = document.getElementById("select_id");
selector.onchange = handleSelectChange;
// or
selector.addEventListener('change', handleSelectChange);

Y no tiene que volver a escribir esto para cada selectelemento que tenga.

Fragmento de ejemplo:

function handleSelectChange(event) {

    var selectElement = event.target;
    var value = selectElement.value;
    alert(value);
}
<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

YakovL
fuente
2
Gran solución, debería aceptarse. El uso de un elemento de evento puro, sin hacer referencia al documento DOM, es la forma más flexible que funciona en muchos entornos como React, Vue o simplemente formularios HTML simples.
VanDavv
8
let dropdown = document.querySelector('select');
if (dropdown) dropdown.addEventListener('change', function(event) {
    console.log(event.target.value);
});
Russell Strauss
fuente
Este enfoque es útil si está trabajando con funciones de flecha.
Franchy
cualquier función de flecha se puede reemplazar con function () {}, es lo mismo
Russell Strauss
no es lo mismo. thisen una función de flecha obtiene su contexto de su entorno léxico pero la función normal tiene su propio this. Mira esto
Franchy
6

Utilizar

document.getElementById("select_id").selectedIndex

O para obtener el valor:

document.getElementById("select_id").value
NubladoMármol
fuente
esta forma de obtener el valor no funcionará en navegadores antiguos, use la solución de Danny en su lugar
wlf
5
<script>
function test(a) {
    var x = a.selectedIndex;
    alert(x);
}
</script>
<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

en la alerta verá el valor INT del índice seleccionado, trate la selección como una matriz y obtendrá el valor

MiPnamic
fuente
5

HTML:

<select onchange="cityChanged(this.value)">
      <option value="CHICAGO">Chicago</option>
      <option value="NEWYORK">New York</option>
</select>

JS:

function cityChanged(city) {
    alert(city);
}
Alejandro
fuente
4

Me pregunto que todo el mundo ha publicado acerca valuey textopción para llegar desde <option>y nadie sugerido label.

Así que también estoy sugiriendo label, compatible con todos los navegadores

Para obtener value(igual que otros sugirieron)

function test(a) {
var x = a.options[a.selectedIndex].value;
alert(x);
}

Para obtener option text(es decir, comunicación o -Seleccionar-)

function test(a) {
var x = a.options[a.selectedIndex].text;
alert(x);
}

O (nueva sugerencia)

function test(a) {
var x = a.options[a.selectedIndex].label;
alert(x);
}

HTML

<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2" label=‘newText’>Communication</option>
</select>

Nota: En HTML anterior para el optionvalor 2, labeldevolverá newText en lugar de Communication

también

Nota: No es posible establecer la propiedad de la etiqueta en Firefox (solo retorno).

Surjit SD
fuente
3

Esta es una pregunta antigua, pero no estoy seguro de por qué la gente no sugirió usar el objeto de evento para recuperar la información en lugar de buscar a través del DOM nuevamente.

Simplemente revise el objeto de evento en su función onChange, vea el ejemplo a continuación

function test() { console.log(event.srcElement.value); }

http://jsfiddle.net/Corsico/3yvh9wc6/5/

Podría ser útil para las personas que buscan esto hoy si este no fuera el comportamiento predeterminado hace 7 años

Vlad Pintea
fuente
2

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}
<select onchange="test()" id="select_id">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

samzna
fuente
0

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}
<select onchange="test()" id="select_id">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
Vishnu S Babu
fuente
-1

He intentado explicarlo con mi propia muestra, pero espero que les sirva de ayuda. No necesita onchange = "test ()" Ejecute el fragmento de código para obtener un resultado en vivo.

document.getElementById("cars").addEventListener("change", displayCar);

function displayCar() {
  var selected_value = document.getElementById("cars").value;
  alert(selected_value);
}
<select id="cars">
  <option value="bmw">BMW</option>
  <option value="mercedes">Mercedes</option>
  <option value="volkswagen">Volkswagen</option>
  <option value="audi">Audi</option>
</select>

Ayaz
fuente
El cambio es mucho mejor que un evento de clic, ya que no es canceroso seleccionar una opción.
Riley Carney
@RileyCarney bueno, depende, en lugar de cambiar el código de refactorización en la parte de la interfaz de usuario al cambiar el nombre de la función en la parte js, es más elegante y, por cierto, no vi ningún evento de clic.
Lo editaste para eliminar el evento onclick jaja. Tan turbio, antes de hacer clic, lo que hizo la notificación si hacía clic en él para el automóvil. edited 7 hours agoAl menos arreglaste el código que no funcionó bien.
Riley Carney