function on actually selected option

Question

I have form, with select menu with only two options. I dont want to use submit button in this form.

When one of options is selected, 'onChange event' runs function. But user can click on already selected option again... again.. again... I need to run this function every time user clicked on already selected or actually selected option. Is there some solution to run function on actually selected option?

jsFiddle EXAMPLE

HTML

<select onchange="test()">
   <option value="value2">option 1</option>
   <option value="value1">option 2</option>
</select>

Javascript

function test(){
   alert('OK');
}

You want to run the function only if the option changes? or if it doesn't change? — Stu, Dec 21 '16 at 09:52
I need to run function everytime. If it changes and if it does not change. — Patrik, Dec 21 '16 at 09:54
Possible duplicate of [Is there an onSelect event or equivalent for HTML — Anupam, Dec 21 '16 at 09:55
One question.. Why? If the value doesn't change, why do you want to call the function?! — Mosh Feu, Dec 21 '16 at 09:55
This select menu I use in the google maps to choose radius on the map. I don't have more space in my form. So I can not use submit button. But user can choose for example 5 km distance again and again... and everytime I need to reload markers on the map. — Patrik, Dec 21 '16 at 09:59
Why not, as simple as it gets, just adding an `onclick` event to the `select` element ? [Here's a working fiddle](https://jsfiddle.net/0njgy81a/) — Alon Adler, Dec 21 '16 at 10:13
I've posted an answer per my comment, does that address your issue ? — Alon Adler, Dec 21 '16 at 11:04

csblo · Answer 1 · 2016-12-21T11:40:53.600

1

You have to listen click event on each option's elements instead of onChange on select element. Then keep in memory the last selected option in order to compare it with the new.

window.addEventListener('load', function() {

   //Get select element on DOM
   var domMySelect = document.getElementById('mySelect');

   //Declare the last selected option (by default the first option)
   var lastSelected = domMySelect.children[0];


   function test(ev) {

       //Compare last selected option with current selected option
       //target is the element on which event is applied
       if (ev.target == lastSelected)
           alert('already selected');

       //Keep last selected option
       lastSelected = ev.target;
   }
   
   
 
   for (var i = 0; i < domMySelect.children.length; i++)
   {
     var child = domMySelect.children[i];
     child.addEventListener('click', test);  
   }

});

<select id="mySelect">
  <option value="value2">option 1</option>
  <option value="value1">option 2</option>
</select>

edited Dec 21 '16 at 11:40

answered Dec 21 '16 at 10:10

csblo

1,571
13
20

Your answer is not answer to my question. :( – Patrik Dec 21 '16 at 10:25
Precise your question, my answer is according to that I had understood – csblo Dec 21 '16 at 10:30
..."I need to run this function everytime user clicked on already selected option."... – Patrik Dec 21 '16 at 10:32
Thank you. Sorry, I edited my question. On already selecet, or actualy selected option. – Patrik Dec 21 '16 at 10:35
I'm sorry, but it does not work. I dont get any alert. :( Can you make working the jsfiddle example, please ? – Patrik Dec 21 '16 at 10:47

vothaison · Answer 2 · 2016-12-21T15:29:46.957

This is a bad trick, or good if you don't mind how IE handles select tag.

html

<select onchange="test(this)" >
   <option id="fake" value="fake">[Default Text]</option>
   <option value="value1">option 1</option>
   <option value="value2">option 2</option>
</select>

and the script

var fake = $('#fake').hide();
function test(selectTag){
   var selectedOption = $( "select option:selected" );
   var selectedValue = selectTag.value;

   // Do you thing with selected value.
  // For example, log it out
  console.log('selectedValue', selectedValue);

  // Set the text of the fake value 
  fake.text(selectedOption.text());
  // And select it. Note that the fake tag itself is still hidden
  selectTag.value = 'fake';
}

Hope you know what I mean. Basically the thing that shows up is not the option you just selected. So, if you select it again, the onchange will fire. Of course you won't have the focused option when the list shows up.

UPDATE

I just made this jsbin: https://jsbin.com/manisasojo/edit?html,js,output

It looks good if you don't have too many option tags.

Please try this bin for your firefox developer: https://jsbin.com/manisasojo/edit?html,js,output; — vothaison, Dec 21 '16 at 15:08

Alon Adler · Answer 3 · 2016-12-21T10:56:41.347

Well, the simplest solution would be just appending an onclick event to your select element:

<select onchange="test(this)" onclick="test(this)">
   <option value="value2">option 1</option>
   <option value="value1">option 2</option>
</select>

You can also distinct the event fired by evnet.type.

Note that when a change event is fired, a click event will follow (look at the fiddle for the behavior), if you want to prevent that you can put some variable which will hold the last event's type or a similar logic such as this pseudo code: if [change event fired] dont do anything as anyway a click event will follow. And a real code example:

function test(e){
   if(event.type == 'click')
   {
       console.log(event.type);
       console.log(e.value);
   }
}

Here is a working fiddle example

function on actually selected option

3 Answers3