javascript - selectpicker - Obtener el valor/texto seleccionado de Seleccionar en el cambio

selectpicker refresh

Question

<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: si alguien sabe cómo obtener el valor o el texto seleccionado, dígale cómo escribir una función para él. He asignado la función onchange () para seleccionar, entonces, ¿qué hago después de eso?

Answer 1

Guau, no hay soluciones realmente reutilizables entre las respuestas aún ... Quiero decir, un controlador de eventos estándar solo debería tener un argumento de event y no tiene que usar identificadores en absoluto ... 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 uno de los 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 JS vainilla:

var selector = document.getElementById("select_id");
selector.onchange = handleSelectChange;

Y no tiene que volver a escribir esto para cada elemento de select 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>

Answer 2

He tratado de explicar con mi propia muestra, pero espero que te ayude. No necesita onchange = "test ()" Ejecute el fragmento de código para obtener un resultado en vivo.

document.getElementById("cars").addEventListener("click", 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>

Answer 3

Me pregunto si todos han publicado sobre el value y la opción de text para obtener de <option> y nadie sugirió la label .

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

Para obtener value (lo mismo que otros sugirieron)

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

Para obtener text option (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 el HTML anterior para el valor de option 2, la label devolverá NuevoTexto en lugar de Comunicación

también

Nota: No es posible configurar la propiedad de la etiqueta en Firefox (solo devolver).

Answer 4

No hay necesidad de 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;

Answer 5

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

document.getElementById(''select_id'').addEventListener(''change'', function(){
    this.value;
});

Answer 6

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

Answer 7

Utilizar

document.getElementById("select_id").selectedIndex

O para obtener el valor:

document.getElementById("select_id").value

Answer 8

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>

Answer 9

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;

Answer 10

<script>
function test(a) {
    var x = (a.value || a.options[a.selectedIndex].value);  //crossbrowser solution =)
    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>

Answer 11

<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, tratará la selección como una matriz y obtendrá el valor