I have two dropdown in my example with reset state (select bank select state).only first dropdown have data .When I changed first dropdown value then i fetch state data and show in dropdown . if i select YES BANK it show me select state .Now if I select any state example Delhi.then do something.But Now If I change again bank instead of yes bank example Axis bank state dropdown show Delhi why ? it show be reset and show select state ?

how to reset second dropdown (when first dropdown is change).here is my code

Second dropdown always show select state with new data of bank,when user change bank name

 onChangeDropdown = e => {
    console.log(e.target.value);
    this.props.callbackFn(e.target.value);
  };

please explain

I have two dropdown in my example with reset state (select bank select state).only first dropdown have data .When I changed first dropdown value then i fetch state data and show in dropdown . if i select YES BANK it show me select state .Now if I select any state example Delhi.then do something.But Now If I change again bank instead of yes bank example Axis bank state dropdown show Delhi why ? it show be reset and show select state ?

how to reset second dropdown (when first dropdown is change).here is my code

https://codesandbox.io/s/7wlwx2volq

Second dropdown always show select state with new data of bank,when user change bank name

 onChangeDropdown = e => {
    console.log(e.target.value);
    this.props.callbackFn(e.target.value);
  };

please explain

• javascript
• reactjs
• react-router
• react-redux

• May I suggest you rewrite your question and try to be a little more clear with what the problem is and what your trying to do. I realize you want to reset a drop down when the second drop down is clicked, but the whole explanation was hard to follow. Also please show the rest of your code. – wuno Commented Mar 1, 2018 at 5:15

1 Answer 1

One possible solution is: Instead of using the selected property on options, use controlled ponent means use the value property of select field. Whenever any change happen to bank list, reset the value of state select filed value. Also define the value='' with default option.

Like this:

<select value={this.props.value} onChange={this.onChangeDropdown}>
    <option value='' disabled>
        {this.props.defaultOption}
    </option>

    {makeDropDown()}
</select>;

Pass value from parent ponent, like this:

<DropDown
    value={this.state.bankName}
    data={this.state.bankData}
    defaultOption="select Bank"
    callbackFn={this.callStateService}
/>
<DropDown
    value={this.state.stateName}
    data={this.state.stateData}
    defaultOption="select State"
    callbackFn={this.callDistrictService}
/>

Define onChange function for state select field change:

callDistrictService = value => {
    this.setState({ stateName: value });
}

Working Sandbox.