How do I fire an event when an option is selected from dropdown in ReactJS. Currently I am using onChange but I need to fire an event even if same option is selected again.

Current code:

<select name="select1" onChange={this.onChangeOption}>
    <option value='A'>Please select A...</option>
    <option value='B'>Please select B...</option>
    <option value='C'>Please select C...</option>
    <option value='D'>Please select D...</option>
</select>

I even tried adding onClick handler to option but that does not fire on click over the options as it works only with elements.

I know there are solutions using jquery by binding click event with option element, but need a solution in React. Dont want to include jQuery for only this requirement.

How do I fire an event when an option is selected from dropdown in ReactJS. Currently I am using onChange but I need to fire an event even if same option is selected again.

Current code:

<select name="select1" onChange={this.onChangeOption}>
    <option value='A'>Please select A...</option>
    <option value='B'>Please select B...</option>
    <option value='C'>Please select C...</option>
    <option value='D'>Please select D...</option>
</select>

I even tried adding onClick handler to option but that does not fire on click over the options as it works only with elements.

I know there are solutions using jquery by binding click event with option element, but need a solution in React. Dont want to include jQuery for only this requirement.

• javascript
• html
• reactjs
• events
• onchange

• react and angular combined if you want it for react please remove the angular tag/ in angular make use of ngModel and use (ngModelChanges) – Rahul Singh Commented Sep 15, 2017 at 5:43
• stackoverflow.com/questions/22482842/… I don't think there is a way to get an event if the selected option is clicked. See also stackoverflow.com/questions/16513638/… – Günter Zöchbauer Commented Sep 15, 2017 at 5:51
• @GünterZöchbauer Thanks man. I know there are solutions using jquery, but need a solution in React. Dont want to include jQuery for only this requirement. – Manu Commented Sep 15, 2017 at 5:57
• What are the solutions in jQuery. If jQuery can do it, then there should be a solution for react as well. I don't know why this question came up in my stream though, I don't know react. Uh, I see. It had the angular tag previously. – Günter Zöchbauer Commented Sep 15, 2017 at 5:59
• In jQuery we can bind a click event with option. – Manu Commented Sep 15, 2017 at 5:59

3 Answers 3

This is a trick, but if you need to call the function on each change, even with the change of the same option, the only solution I know - use onClick and its details:

class Select extends React.Component{
    onChangeOption(e){
        if (e.detail === 0){
            console.log(e.target.value);
        }
    }
    render(){
        return (
            <select name="select1" onClick={this.onChangeOption}>
                <option value='A'>Please select A...</option>
                <option value='B'>Please select B...</option>
                <option value='C'>Please select C...</option>
                <option value='D'>Please select D...</option>
            </select>
        )
    }
}

https://jsfiddle.net/69z2wepo/86140/

You can achieve this by using the onClick event provided by ReactJS

<select 
  name="select1"
  onChange={(e) => {
   // Do not use onChange method, for your use case
   console.log('event value', e.target.value);
   console.log('event name', e.target.name);
  }}
  onClick={(e) => {
    // Use onClick method, for your use case
    console.log('XX event value', e.target.value);
    console.log('XX event name', e.target.name);
  }}
>
  <option value='A'>Please select A...</option>
  <option value='B'>Please select B...</option>
  <option value='C'>Please select C...</option>
  <option value='D'>Please select D...</option>
</select>

onChange as the name suggests will only be fired when the previous value of select is not equal to the new value provided to it. But in your case since you want trigger the change event even if the same value is selected. You need to use the onClick method as I have demonstrated in the code above. This will fire every time you click on select tag.

I hope this helps. Cheers

Hope this will solve your issue since we dont have anything bydefault in javascript. Just a work around. Its better not to do that math with better u call the callback everytime onclick is triggered.

let a = 0; //temporary variable - not requred until its particular
let onChangeOption = ()=>{
a = a+1; //not requred until its particular
if(a%2 == 0){// not requred until its particular
console.log("triggered ")
}
}

<select name="select1"  onclick="onChangeOption()">
    <option value='A'>Please select A...</option>
    <option value='B'>Please select B...</option>
    <option value='C'>Please select C...</option>
    <option value='D'>Please select D...</option>
</select>