<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?
javascript
Siva
fuente
fuente
value
deloption
que se seleccionó entonces ...<select onchange="window.alert(this.value);">
...option
s ...</select>
... debe conseguir ya sólo eso y nada más.Respuestas:
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()); })
fuente
select.text
o en jQueryselect.text()
.$('#select_id option:selected').text()
. Esto devolverá el texto de la opción seleccionada, Seleccionar o Comunicacióndocument.getElementById("select_id").onchange = (evt) => { console.log(evt.srcElement.value); }
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>
fuente
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>
fuente
a.value
para? ¿Existe algún navegador que realmente lo admita? ¿No podemos simplemente usara.options[a.selectedIndex].value
?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;
fuente
Vaya, todavía no hay soluciones realmente reutilizables entre las respuestas ... Quiero decir, un controlador de eventos estándar debería obtener solo un
event
argumento 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
select
elemento 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>
fuente
let dropdown = document.querySelector('select'); if (dropdown) dropdown.addEventListener('change', function(event) { console.log(event.target.value); });
fuente
this
en una función de flecha obtiene su contexto de su entorno léxico pero la función normal tiene su propio this. Mira estoUtilizar
document.getElementById("select_id").selectedIndex
O para obtener el valor:
document.getElementById("select_id").value
fuente
<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
fuente
HTML:
<select onchange="cityChanged(this.value)"> <option value="CHICAGO">Chicago</option> <option value="NEWYORK">New York</option> </select>
JS:
function cityChanged(city) { alert(city); }
fuente
Me pregunto que todo el mundo ha publicado acerca
value
ytext
opción para llegar desde<option>
y nadie sugeridolabel
.Así que también estoy sugiriendo
label
, compatible con todos los navegadoresPara 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>
también
fuente
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
fuente
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>
fuente
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;
fuente
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>
fuente
edited 7 hours ago
Al menos arreglaste el código que no funcionó bien.