0

Hi i would like to achieve in my code:

Form with Options

(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:

conditional drop down menus

but i can not use with my code.

Some help. Thanks a lot.

ddaudiosolutions
  • 131
  • 2
  • 15

0 Answers0