Obtener el valor / texto seleccionado de Seleccionar al cambiar

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

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());
})

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>

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;

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>

let dropdown = document.querySelector('select');
if (dropdown) dropdown.addEventListener('change', function(event) {
    console.log(event.target.value);
});

Utilizar

document.getElementById("select_id").selectedIndex

O para obtener el valor:

document.getElementById("select_id").value

<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

HTML:

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

JS:

function cityChanged(city) {
    alert(city);
}

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

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

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;

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>