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




input value (9)

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

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


Answers

function getComboA(selectObject) {
    var value = selectObject.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 .


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 el JavaScript es jQuery. Debe buscar las diferencias y asegurarse de estar utilizando la adecuada.


Este código una vez que escribo para just just onChange event of select, puede guardar este código como html y ver que funciona. Y 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>

Esto me fue ayudado.

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

solución jQuery

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

Los elementos seleccionados suelen tener 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


Encontré útil la respuesta de @ Piyush, y para agregarle más, si crea programáticamente una selección, entonces hay una forma importante de obtener este comportamiento que puede no ser obvio. Supongamos 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 ese argumento pasado, así que en su lugar puede hacer esto:

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

Y puedes establecer el parámetro. Si lo haces de la primera manera, entonces el argumento que obtendrás para tu función onchange dependerá del navegador. La segunda forma parece funcionar bien entre navegadores cruzados.


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

<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>

Puedes probar el código de abajo

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

Responder:

  • El navegador intentará convertir chucknorris en un valor hexadecimal.
  • Como c es el único carácter hexadecimal válido en chucknorris , el valor se convierte en: c00c00000000 ( 0 para todos los valores que no eran válidos ).
  • Luego el navegador divide el resultado en 3 grupos: Red = c00c , Green = 0000 , Blue = 0000 .
  • Dado que los valores hexadecimales válidos para fondos html solo contienen 2 dígitos para cada tipo de color ( r , g , b ), los últimos 2 dígitos se truncan de cada grupo, dejando un valor rgb de c00000 que es un color de tono rojizo.




javascript jquery html combobox onchange