on ('change') shoot at every click

5

How do I do that every time I choose an option it triggers an event. In the example below it is already with the selected one. I wanted that even if I choose it again it shoots without having to switch between one and another

$('select').on('change', function() {
  alert( this.value );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select><optionvalue="1">One</option>
    <option value="2">Two</option>
</select>
    
asked by anonymous 15.10.2018 / 19:59

3 answers

2

It's quite simple to do this, I'll briefly explain how events related to the mouse work, eg, click or change. Every time you use a JQuery event, the framework itself places an object in the callback function (event) with all the methods and parameters you can work with. An object that you can use is called timeStamp, it returns you how long the event took, when you click on an object on the screen the framework spends some time to identify the object's data, but after it loads, when its combobox is open , the click spends 0 seconds because JQuery has already read the data previously. I do not know if you can understand it well but once it is loaded, just check if the timestamp is 0, then you can get the data clicked. See the example working below.

$(function() {
        $('#dados').click(function(event) {
            if (event.timeStamp == 0) {
                var dados = $(this).val();
                alert(dados);

            }
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="dados">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

I hope I have helped.

    
16.10.2018 / 17:03
2

You can hear the click event on the select, but this event is fired before selecting any option. If you want to do something so that the user finishes choosing an option, even if it is the previous one or even a click outside the select, you can use the script below:

let gatilho;
$(document).click(function(){
  if (gatilho){
    gatilho=false;
    alert( $('select').val() ) //colocar aqui sua ação;
  }
});

$('select').click(function(e) {
  e.stopPropagation();
  if (gatilho) {
    alert( $(this).val() ) //colocar aqui sua ação;
    gatilho=false;
  } else {
    gatilho=true;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select><optionvalue="1">One</option>
    <option value="2">Two</option>
</select>
    
15.10.2018 / 21:16
1

Several shapes, here are some of them

var valorAntigo = null;
$('select').click(function(){
  s = $(this);
  val = s.val();
  if (valorAntigo == null) {
      valorAntigo = val;
  } else {
      valorAntigo == s.val() ? alert('mesmo option valor = '+ this.value) : alert('outro option valor = '+ this.value);
      valorAntigo = null;      
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select><optionvalue="1">One</option>
    <option value="2">Two</option>
</select>

OU

$(function () {
    var cc = 0;
    $('select').click(function () {        
        cc++;
        if (cc == 2) {
            $(this).change();
            cc = 0;
        }         
    }).change (function () {
        alert(this.value);
        cc = -1;
    });      
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select><optionvalue="1">One</option>
    <option value="2">Two</option>
</select>
    
16.10.2018 / 02:28