Event for changing option even clicking on the selected option

Question

Here is my current code:

$('select').on('change', function(){
  console.log('An option selected (it can be even the old option)')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>1</option>
  <option selected>2</option>
  <option>3</option>
</select>

As you can see, when I click on the second option (2, which is selected one by default), that event does not happen. That's exactly what I want to happen :-).

In other word, I want to make it working valid according to this message:

An option selected (it can be even the old option)

Any idea how can I handle that?

Noted that this won't work:

$('select > option').on('click', function(){

@Satpal Neat. But not perfect. *(since it will be executed once per page loading)* — Shafizadeh, Dec 11 '17 at 11:30
Well you could simply start by making that `on('change click'`, so that both events will be handled. Only thing is that clicking the select field itself to open it in the first place also triggers this. You could either try and filter those out (perhaps by checking whether the click target was actually the select, or one of the option), or by adding the click handler to the option elements only. (Click event on options can have some cross-browser issues though, so make sure to properly test.) — CBroe, Dec 11 '17 at 11:39

score 0 · Answer 1 · answered Dec 11 '17 at 11:30

0

Try this

$('select').on('change', function(){ console.log('An option selected (it can be even the old option)') }).trigger('change')

$('select').on('change', function() {
  console.log('An option selected (it can be even the old option)')
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select>
  <option>1</option>
  <option selected>2</option>
  <option>3</option>
</select>

answered Dec 11 '17 at 11:30

Nisal Edu

7,237
4
28
34

Just as a note, your idea has a small problem: it will be executed once when page loaded – Shafizadeh Dec 11 '17 at 11:31
1

You want it triggers once you reselect it as it is already selected wait I will edit my answer – Nisal Edu Dec 11 '17 at 11:33
@Shafizadeh try this might help you https://stackoverflow.com/questions/13767190/click-already-selected-option-in-select-box – Nisal Edu Dec 11 '17 at 11:58

edkeveked · Answer 2 · 2017-12-11T12:28:41.187

If you want to detect the first select, you consider using a function binding instead of select on change;

function myFunction(target){
   console.log($(target).children("option:selected").val())
}

select {

  /* styling */
  background-color: white;
  border: thin solid blue;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;

  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}


/* arrows */

select.classic {
  background-image:
    linear-gradient(45deg, transparent 50%, blue 50%),
    linear-gradient(135deg, blue 50%, transparent 50%),
    linear-gradient(to right, skyblue, skyblue);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}

select.classic:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    linear-gradient(to right, gray, gray);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;
  border-color: grey;
  outline: 0;
}



select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

select.minimal:focus {
  background-image:
    linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, green 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}


select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="classic" onclick="myFunction(this)">
  <option>1</option>
  <option selected>2</option>
  <option>3</option>
</select>

@Shafizadeh, the function is executed after an option is selected. Is it not what you want? — edkeveked, Dec 11 '17 at 11:41
What you said is exactly what I want, but your code doesn't behavior like that. The event in your code will be executed when you click on that drop-down select tag, not when you choose an option. — Shafizadeh, Dec 11 '17 at 11:43
@Shafizadeh, I found a way around to make sure that your code is not triggered for the first click; tell me if that is the desired behaviour — edkeveked, Dec 11 '17 at 11:52
well I don't see any change in the behavior of your solution. Still when that drop down opens, that event happens, which shouldn't be ... — Shafizadeh, Dec 11 '17 at 11:55
@Shafizadeh, the previous code works already. Actually, you must be carefull regarding how you select the drop down. If you click well on the edge of the arrow, the function will not be triggered. — edkeveked, Dec 11 '17 at 12:00

Event for changing option even clicking on the selected option

2 Answers2