Hi i would like to achieve in my code:
(this is part of the code....):
<div className="row">
<div className="col-md me-3">
<label className="mt-3">
InfraestructuraOp
</label>
<Field
name='infraestructuraOp'
component='select'
className="col-md form-control form-select"
id="infraestructuraOp"
>
<option defaultValue={''} > </option>
{
infraOptions.map((te, i) =>
Object.keys(te).map(key => {
return (<option value={key} key={key}> {key} </option>)
}))
}
</Field>
</div>
<div className="col-md me-3">
<label className="mt-3">
Sistema
</label>
<Field
name='sistema'
component='select'
className="col-md form-control form-select"
id="sistema"
>
<option value={''} > </option>
{
values.infraestructuraOp !== undefined ?
Object.keys(infraOptions[0][values.infraestructuraOp]).map((key2, i) => {
return <option value={key2} key={key2}> {key2} </option>
}) : <option value={''} > </option>
}
</Field>
</div>
<div className="col-md">
<label className="mt-3">
Producto
</label>
<Field
name='producto'
component='select'
className="col-md form-control form-select"
id="producto"
>
{
(values.infraestructuraOp === undefined && values.sistema === undefined) || values.infraestructuraOp === undefined || values.sistema === undefined ?
<option value={''} > </option> :
getKey(values.infraestructuraOp, values.sistema) < 0 ?
<option value={''} > </option> :
Object.keys(infraOptions[0][values.infraestructuraOp][values.sistema]).map(sistema => {
return <option value={sistema} key={sistema}> {sistema} </option>
})
}
</Field>
</div>
</div>
I would like that the second drop down menu value, change to '' or remove, when i change the value in the first drop down menu.
I see and did try things like:
but i can not use with my code.
Some help. Thanks a lot.