Clear content in select box when first select option changed - reactJS

Question

I am new to ReactJS. I have used AntJS select in my ReactJS project. I have two select in HTML. When the first select is selected, its relative dropdown will be loaded in the second select.

UI View:

When the user chooses the option in the first select, the second select will load its contents.

It was working great. Now my issue was " When I choose an option in second select, it is there in the second select box. But When I changed the option in the first select, the already chosen option in the second select is still there, but the drop-down content in the second select has changed.

My Issue in UI View: How to clear the selected content in the second select box when the first select option has changed". I have tried so far. I don't how to make it possible. Help me with some solutions.

Code:

WAAccountNameChange(value){  
        this.setState({selectedValue:"", waWebsiteList: this.state.waAccountWebsiteList[value] }) 
    }

First Select:

<Select  " onChange= {(value) => { this.WAAccountNameChange(value)}} >
    {this.state.waAccountList.map((item, index) => <Select.Option value={item} key={index}>{item}</Select.Option>)}
</Select>

Second Select:

<Select  defaultValue={this.state.selectedValue}  onChange= {(value) => { this.setState({ selectedValue: value })} } >
    {this.state.waWebsiteList.map((item, index) => <Select.Option value={item} key={index}>{item}</Select.Option>)}
</Select>

try adding a defaultValue attribute to the second Select, and set it to the selectedValue state, and reset the selected value when the first Select is changed — Adarsh Hegde, Apr 01 '20 at 09:41
I tried that way. I doesn't get worked..the value in the `second select` is still there — Stack Kiddy, Apr 01 '20 at 09:44
in the onChange of the first select, set the selectedValue to empty — Adarsh Hegde, Apr 01 '20 at 09:48
yes, i have set there, `this.setState({selectedValue:""})`. but still it shows — Stack Kiddy, Apr 01 '20 at 09:51
https://stackoverflow.com/questions/47415280/how-to-clear-antd-select-items-programmatically have a look at this — Adarsh Hegde, Apr 01 '20 at 09:54

score 0 · Answer 1 · answered Mar 01 '22 at 04:55

0

On the change of first select menu clear the value of second select box. If you retrieve data from API than clear state on API success.

answered Mar 01 '22 at 04:55

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 01 '22 at 10:04

Clear content in select box when first select option changed - reactJS

1 Answers1