0

Verán, tengo un select que al ir cambiando sus opciones va asignando un valor a un input text. Hasta allí todo bien, pero quise añadirle un evento 'change' al campo de text, para que realice un alert si un usuario realiza un cambio en el texto, y también cuando sea modificado por efecto del select. Sin embargo, sólo detecta el evento 'change' en el caso del usuario. Adjunto un enlace a codepen con mi código.

Mi codigo en codepen

2 respuestas 2

1

Te he puesto el código debajo. Según te he entendido, lo que necesitas es:

  • En un principio, al seleccionar un option del select, se escribe el value asociado en el campo de texto. Esto no sacará un alert.
  • Al cambiar de option, se escribirá de nuevo el value asociado, lo cual hará que se muestre un alert ya que el texto habrá sido modificado por efecto del select.
  • Al escribir sobre el texto (y sacar el foco del mismo) se mostrará un alert ya que el texto habrá sido modificado.

Lo que tienes que hacer es basicamente controlar si hay algún texto en el campo input (así distingues de si se selecciona sobre el select por primera vez) y si al seleccionar un option o escribir sobre el campo de texto, el texto que había escrito antes en el mismo coincide con el texto que hay escrito después. Analiza el código y verás que es sencillo.

var valor_inicial = '';

$('#sel1').on('change', function() {
  var valor_texto = $('#txt1').val();
  var valor_select = $(this).val();
  if(valor_texto && valor_texto != valor_select){
    alert('modificado');    
  }
  valor_inicial = $(this).val();
  $('#txt1').val(valor_inicial);
});

$('#txt1').change(function() {
  var valor_despues = $(this).val();
  if(valor_inicial && valor_despues != valor_inicial){
    alert('modificado');
  }

});
.container {
  margin: 0 auto;
  width: 460px;
  height: 132px;
  border: 10px solid #0122;
}

#sel1 {
  cursor: pointer;
  margin: 10px 0 0 30px;
  height: 35px;
  width: 200px;
  border-radius: 7px;
  outline: 0;
}

#txt1 {
  margin: 20px 0 0 2.7rem;
  height: 36px;
  border: 0;
  outline: 0;
  cursor: default;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

<select id="sel1" name="select">
  <option value="" selected>Nada seleccionado</option>
  <option value="1">Primero</option>
  <option value="2">Segundo</option>
  <option value="3">Tercero</option>
</select>

<input type="text" id="txt1" name="text" placeholder="Resultado..."/>
  
</div>

Espero haberte ayudado.

0

Puedes sencillamente llamar change() del elemento:

$('input#1').change(function () {
    $('input#2').change(); // Lanza evento change de input id 2
});

$('input#2').change(function () {
    $('p').text('Input 2 ha cambiado <p>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Hola</p>

<input type="text" id="1" value="Cambia aquí">
<input type="text" id="2">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.