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?

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?

• javascript
• jquery
• events
• html-select

Share Improve this question Follow asked Dec 11, 2013 at 13:16 Everton LengerEverton Lenger 1,44622 gold badges1818 silver badges3434 bronze badges 3

• What doesn't work in Chrome? jsfiddle/t9suH – CodingIntrigue Commented Dec 11, 2013 at 13:19
• 1 Shouldn't the state be the same if they pick the same item? Seems like you should have a "Pick One" option. – epascarello Commented Dec 11, 2013 at 13:19
• The onClick event in the option doesn't work on Chrome. I open a fancybox in the onClick, and that one must be opened every time the user clicks on the correspondent option. – Everton Lenger Commented Dec 11, 2013 at 13:24

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

I wrote a code but it is not working on IE, just give it a try: http://jsfiddle/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;
});

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

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

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.

Use:

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

Hope this will work for you