12

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.

Improve this question
6
  • react and angular combined if you want it for react please remove the angular tag/ in angular make use of ngModel and use (ngModelChanges) 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/… 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. 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. Commented Sep 15, 2017 at 5:59
  • In jQuery we can bind a click event with option. Commented Sep 15, 2017 at 5:59

3 Answers 3

Reset to default
20
+50

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

what does e.detail === 0 symbolise?
detail is used to pass additional event data. On normal click/mouse event it would send the number of clicks (2 on dbclick). When you select an option in select, e.detail is always 0 because there's no additional data to send as in the case of usual mouse events (you can't dbclick an option)
Unfortunately detail is not supported by IE11 stackoverflow.com/questions/55903854/…
0

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

Improve this answer

6 Comments

Sorry but that has a flaw.. As soon as you click on select dropdown, onClick will get fired. And on selecting an option, this click event is fired again. Moreover when you change the option 2 events are fired together, click and change.
You can remove the onChange method, the above code was as a demonstration. You should either use onChange or onClick. Mostly we should use onChange but in your case you should use onClick.
But thats not going to help as well since as soon as you click on select dropdown, onClick will get fired. And on selecting an option, this click event is fired again.
This is the only possible solution that you can use, the other use case that you can use is to add an onClick event on each option tag. And remove the onChange/onClick method from your select tag. But this is only viable if the options are static and not dynamic i.e, not coming from a db.
You cant bind onClick with options. It is not supported on any browser.
|
0

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>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.