CODEWITHSUNDEEP
javascriptreactjsdrop-down-menu
Noman Ali
Noman Ali

Reputation: 3340

One dropdown field leading to updated values for another dropdown field

I have two drop downs, when dropdown-1 is changed, selected option of dropdown-2 should be changed to the same as dropdown-1

Dropdown-1:

<div className="select-style-right joiner-select">
    <select className="selectalljoiners" onChange={this.handleMainSelectChanged} value={this.state.selectedJoinerValue}>
        <option value="">Select</option>
        <option value="Permanent">Permanent</option>
        <option value="Probationary">Probationary</option>
        <option value="Contractual">Contractual</option>
        <option value="Intern">Intern</option>
    </select>
</div>

Dropdown-2:

<div className="select-style-right joiner-select">
    <select className={index} value={this.state.selectedJoinerValue}>
        <option value="">Select</option>
        <option value="Permanent">Permanent</option>
        <option value="Probationary">Probationary</option>
        <option value="Contractual">Contractual</option>
        <option value="Intern">Intern</option>
    </select>
</div>

handleMainSelectChanged:

handleMainSelectChanged = (e) => {
        thisclass.setState({
            selectedJoinerValue: e.target.value
        })
}

New to React, don't know how to achieve this. Please help out.

Upvotes: 0

Views: 406

Answers (1)

Mikhail Katrin
Mikhail Katrin

Reputation: 2384

If one of dropdowns changed the second one will take same selected option.

https://jsfiddle.net/b1atetou/

class Example extends React.Component {
    constructor() {
        super();
        this.state = { value: "" }
    }

    handleDropDownChage = (event) => {
        this.setState({value: event.target.value});
    }

    render() {
        return ( 
            <div>
                <div>
                    <select onChange={this.handleDropDownChage} value={this.state.value}>
                        <option value="">Select</option>
                        <option value="Permanent">Permanent</option>
                        <option value="Probationary">Probationary</option>
                        <option value="Contractual">Contractual</option>
                        <option value="Intern">Intern</option>
                    </select>
                </div>

                <div>
                    <select onChange={this.handleDropDownChage} value={this.state.value}>
                        <option value="">Select</option>
                        <option value="Permanent">Permanent</option>
                        <option value="Probationary">Probationary</option>
                        <option value="Contractual">Contractual</option>
                        <option value="Intern">Intern</option>
                    </select>
                </div>
            </div>
        );
    }
}

Upvotes: 1

Related Questions