javascript - evento - select onchange php




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

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?


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.


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

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>

Seleccione un auto nuevo de la lista. Cuando selecciona un automóvil nuevo, se activa una función que genera el valor del automóvil seleccionado.

<!DOCTYPE html>
<html>
	
  <body>

    <select id="mySelect" onchange="myFunction(this)">
      <option value="Audi">Audi
      <option value="BMW">BMW
      <option value="Mercedes">Mercedes
      <option value="Volvo">Volvo
    </select>

    <p id="demo"></p>

    <script>
      function myFunction(selectObject) {
        var x = selectObject.value;
        document.getElementById("demo").innerHTML = "You selected: " + x;
      }
    </script>

  </body>
	
</html>

W3school onChange

Arreglo de JavaScript, para cada bucle y selección de cambio

<!DOCTYPE html>
<html>
	
  <body>
			
    <p id="select"></p>			

    <script>
					
      var txt = "";
      var person = {id1:"John", id2:"Doe", id3:"John Doe"}; 
      var x;
					
      text   = "<select id='mySelect' onchange='myFunction()'>";					
					
      for (x in person) {

        text += "<option value='" + x + "'>" + person[x] + "</option>";				
							
      }
					
      text += "</select>";
					
      document.getElementById("select").innerHTML = text;
					
    </script>
			
    <p id="text"></p>			

    <script>
      function myFunction() {
        var x = document.getElementById("mySelect").value;							
        document.getElementById("text").innerHTML = "You selected: " + x + " as value";
      }
    </script>			

  </body>
	
</html>





onchange