如何在选项标签中触发事件？

Question

I looked for a solution for this, but couldn't find it.

I have a simple select like this:

<select id="sltFiltroPedidos">
  <option value="todos">Todos</option>
  <option value="hoje">de hoje</option>
  <option value="semana">da semana</option>
  <option value="periodo">Período</option>
  <option value="pedido">Número do pedido</option>
</select>

Always the user clicks on an option, a javascript event must be fired. The onChange event in the select doesn't work for me, because the user can choose the same option, and the event must be fired as well.

I tried the onClick event on options. It works on IE and FF, but doesn't work on Chrome. Any ideas how can I do it?

Answer 1

I wrote a code but it is not working on IE, just give it a try: http://jsfiddle.net/shahe_masoyan/scuhb/1/

<select id="sltFiltroPedidos">
  <option value="todos">Todos</option>
  <option value="hoje">de hoje</option>
  <option value="semana">da semana</option>
  <option value="periodo">Período</option>
  <option value="pedido">Número do pedido</option>
</select>


var isOpen = false;
$('#sltFiltroPedidos').on('mouseup', function () {
    if (isOpen){
        alert(this.value);
    }
    isOpen = !isOpen;
});

Answer 2

As per your question you can do following :-

<select id="sel" onblur="showme()">
  <option value="todos" >Todos</option>
  <option value="hoje" >de hoje</option>
  <option value="semana" >da semana</option>
  <option value="periodo" >Período</option>
  <option value="pedido" >Número do pedido</option>
</select>

But i don't know this right option or not. But this will work as you told.

function showme()
{
    alert(document.getElementById('sel').value);
}

Answer 3

You can try onclick like,

var prevValue=$('select').val();
$('select').on('click',function(){
   if(prevValue==this.value) // code for same values
   // your code to run
});

Answer 4

I had the same issue. In my task, I needed to get the value of the selected option. This helped me:

let selectedOption = "";
<select>.addEventListener("change", event => {
    selectedOption = event.target.value
});

The select variable is, obviously, the tag . It might look strange, but select takes the value of the chosen option, that's why the code works.

Answer 5

Use:

 $('#sltFiltroPedidos').on('change', function() {
    alert( this.value );// or this.val()
 });

Hope this will work for you