CODEWITHSUNDEEP
javascripthtml-select
Patrik
Patrik

Reputation: 1327

function on actually selected option

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

Upvotes: 0

Views: 113

Answers (3)

vothaison
vothaison

Reputation: 1694

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.

Upvotes: 1

csblo
csblo

Reputation: 1631

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>

Upvotes: 1

Alon Adler
Alon Adler

Reputation: 4024

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

Upvotes: 0

Related Questions