Cómo pasar parámetros en onChange of html select


198

Soy un novato en JavaScript y jQuery. Quiero mostrar un combobox-A, que es un HTML <select>con su idcontenido seleccionado y en el otro lugar en onChange ().

¿Cómo puedo pasar el cuadro combinado completo con su selección id, y cómo puedo pasar otros parámetros al evento onChange?


55
¿Puedes publicar algún código por favor?
KJYe.Name 葉家仁

Respuestas:


371

function getComboA(selectObject) {
  var value = selectObject.value;  
  console.log(value);
}
<select id="comboA" onchange="getComboA(this)">
  <option value="">Select combo</option>
  <option value="Value1">Text1</option>
  <option value="Value2">Text2</option>
  <option value="Value3">Text3</option>
</select>

El ejemplo anterior le proporciona el valor seleccionado del cuadro combinado en el evento OnChange .


Gracias, esto me ha funcionado. Básicamente quiero mostrar el mismo cuadro combinado en un lugar diferente, así que le di 2 identificadores diferentes a 2 cuadros combinados. De todos modos, puedo mostrar el mismo cuadro combinado en un lugar diferente. Cualquier ayuda será apreciada.
Gendaful

13
Una forma más sucinta de recuperar el valor en el interior getComboA()esvar value = sel.value;
Yony

44
El evento de cambio se activa solo si el cuadro de selección pierde el foco. ¿Hay alguna forma de activar el evento inmediatamente después de que cambie un valor?
doABarrelRoll721

2
use this.value en su lugar y funcionará =) enviar esto es enviar todo el elemento seleccionado
Colin Rickels

Para mi caso, el código funciona en Firefox pero no en Chrome.
avijit bhattacharjee

50

Otro enfoque que puede ser útil en algunas situaciones, es pasar el valor de lo seleccionado <option />directamente a la función de esta manera:

function myFunction(chosen) {
  console.log(chosen);
}
<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>


1
Esto era exactamente lo que necesitaba. Ya tenía una función de JavaScript que cambiaba las imágenes en color al hacer clic en muestras de color. Pero también tenía una solicitud para que funcione en las opciones de selección desplegable de PayPal. Usé esto, pero en lugar de usar 'valor' (ya que lo necesitaba para Paypal) agregué una 'etiqueta' a cada opción con los nombres de variables que usé para cambiar las fotos. Funcionó perfectamente! ¡¡Gracias!!
FlashNoob468

55
Esto es bonito. Otra opción válida más simple es: <select onChange = "myFunction (this.value)">
Daniel Silva el

1
Útil para acceder a otros atributos de la opción seleccionada.
Cees Timmerman

31

Para saber cómo hacerlo en jQuery:

<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>

<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
  alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>

También debe saber que Javascript y jQuery no son idénticos. jQuery es un código JavaScript válido, pero no todo JavaScript es jQuery. Debes buscar las diferencias y asegurarte de estar usando la adecuada.


2
Intenté esto, pero la función de cambio no se llama incluso si pongo el método document.ready. Mi código es htmlData.push ('<select id = "choose" name = "choose">'); $ ('# choose'). change (function () {alert ('change called'); alert ('La opción con valor' + $ (this) .value () + 'y text' + $ (this). text () + 'fue seleccionado.'); Por favor
ayúdenme

@Gendaful: htmlData.push($('<select id="choose" name="choose">'));debería hacer el truco (antes presionaste una cadena en lugar de un nodo completo). > Pasaron 6 años ...
Johannes

6

Solución JavaScript

<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
<script>
 document.getElementById("comboA").onchange = function(){
    var value = document.getElementById("comboA").value;
 };
</script>

o

<script>
 document.getElementById("comboA").onchange = function(evt){
    var value = evt.target.value;
 };
</script>

o

<script>
 document.getElementById("comboA").onchange = handleChange;

 function handleChange(evt){
    var value = evt.target.value;
 };
</script>

Esta es la solución más general y completa aquí. ¡Gracias!
divs1210

5

La respuesta de @ Piyush me pareció útil, y solo para agregarle, si crea programáticamente una selección, entonces hay una manera importante de obtener este comportamiento que puede no ser obvio. Digamos que tiene una función y crea una nueva selección:

var changeitem = function (sel) {
  console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';

El comportamiento normal puede ser decir

newSelect.onchange = changeitem;

Pero esto realmente no le permite especificar el argumento pasado, por lo que puede hacer esto:

newSelect.setAttribute('onchange', 'changeitem(this)');

Y puedes configurar el parámetro. Si lo hace de la primera manera, entonces el argumento que obtendrá sobre su onchangefunción dependerá del navegador. La segunda forma parece funcionar bien en todos los navegadores.


1
Su evalconversión de cadena a código malvada no es necesaria. En realidad newSelect.onchange = changeitem;funciona bien si reescribe changeitem como var changeitem = function () {console.log(this.selectedIndex); };(es decir, usando en thislugar de un argumento de función). O, déjalo changeitemcomo está y escribe newSelect.onchange = function () {changeitem(this); };.
Steve Byrnes

1
newSelect.setAttribute ('onchange', 'changeitem (this)'); - aplausos por eso
ghosh

5

Solución jQuery

¿Cómo obtengo el valor de texto de una opción seleccionada?

Los elementos seleccionados generalmente tienen dos valores a los que desea acceder.
Primero está el valor que se enviará al servidor, que es fácil:

$( "#myselect" ).val();
// => 1

El segundo es el valor de texto de la selección.
Por ejemplo, usando el siguiente cuadro de selección:

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>

Si desea obtener la cadena "Mr" si se seleccionó la primera opción (en lugar de solo "1"), lo haría de la siguiente manera:

$( "#myselect option:selected" ).text();
// => "Mr"  

Ver también


5

Esto me ayudó.

Para seleccionar:

$('select_tags').on('change', function() {
    alert( $(this).find(":selected").val() );
});

Para radio / casilla de verificación:

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});

3

Puedes probar el siguiente código

<select onchange="myfunction($(this).val())" id="myId">
    </select>

1

este código una vez que escribo para explicar el evento onChange de select, puede guardar este código como html y ver el resultado, funciona y es fácil de entender para usted.

<html>
    <head>
        <title>Register</title>
    </head>
    <body>
    <script>
        function show(){
            var option = document.getElementById("category").value;
            if(option == "Student")
                  {
                        document.getElementById("enroll1").style.display="block";
                  }
            if(option == "Parents")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
            if(option == "Guardians")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
        }
    </script>
            <form action="#" method="post">
                <table>
                    <tr>
                        <td><label>Name </label></td>
                        <td><input type="text" id="name" size=20 maxlength=20 value=""></td>
                    </tr>
                    <tr style="display:block;" id="enroll1">
                        <td><label>Enrollment No. </label></td>
                        <td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Email </label></td>
                        <td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Mobile No. </label></td>
                        <td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Address</label></td>
                        <td><textarea rows="2" cols="20"></textarea></td>
                    </tr>
                    <tr >
                        <td><label>Category</label></td>
                        <td><select id="category" onchange="show()">    <!--onchange show methos is call-->
                                <option value="Student">Student</option>
                                <option value="Parents">Parents</option>
                                <option value="Guardians">Guardians</option>
                            </select>
                        </td>
                    </tr>
                </table><br/>
            <input type="submit" value="Sign Up">
        </form>
    </body>
</html>

1

En caso de que alguien esté buscando una solución React sin tener que descargar dependencias adicionales, puede escribir:

<select onChange={this.changed(this)}>
   <option value="Apple">Apple</option>
   <option value="Android">Android</option>                
</select>

changed(){
  return e => {
    console.log(e.target.value)
  }
}

Asegúrese de vincular la función cambiada () en el constructor como:

this.changed = this.changed.bind(this);

0

Esto funcionó para mí onchange = setLocation($(this).val())

Aquí.

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.