0

Poseo dos select y dos arrays, ¿cómo puedo hacer que al seleccionar en el select "Frutas", en el siguiente select me aparezcan las frutas del array de frutas para poder elegir?

<select id="primer-eleccion">
  <option value="none">Fruta</option>
  <option value="none">Verdura</option>
</select>

<select id="segunda-eleccion">
  <option value="none"></option>
</select>

const verdura = ["lechuga", "acelgas",  "espinacas", "apio"]
const fruta = ["Arándanos", "Manzana", "pera"]
1
  • Entiendo lo que quieres hacer, pero si estás usando react, ¿puedes colocar tu componente para ver qué es lo que no te funciona? Commented el 18 nov. 2022 a las 0:59

2 respuestas 2

0

const verdura = ["lechuga", "acelgas",  "espinacas", "apio"]
const fruta = ["Arándanos", "Manzana", "pera"]
var select1 = document.getElementById('primer-eleccion');
var select2 = document.getElementById('segunda-eleccion');

select1.addEventListener('change',opcionCambiada );

function opcionCambiada(){
    var lista=[]
    select2.value = []

  if(select1.value==='F'){
    lista=fruta;
    }else{
   lista=verdura;
  }
    addOptions(lista)

};
function addOptions(list) {
console.log(select2.value)
    var options = document.querySelectorAll('#segunda-eleccion option');
    options.forEach(o => o.remove());

 for (value in list) {
  var option = document.createElement("option");
  option.text = list[value];
  select2.add(option);
 }

}
<select id="primer-eleccion">
      <option value="">Seleccione un valor</option>

  <option value="F">Fruta</option>
  <option value="V">Verdura</option>
</select>

<select id="segunda-eleccion">
  <option value="opcionCambiada()">Seleccione un valor</option>

</select>

1
  • Hay que elaborar la respuesta
    – g.4
    Commented el 19 nov. 2022 a las 5:48
0

Había hecho la respuesta con vanilla js pero vi que pusiste la etiqueta de react así que esta es mi respuesta con React.js

Converti los arrays en arrays de objetos para manipularlos mejor.

Componente Select (Frutas, Verduras)

import React from "react";

const options = [
  {
    id: 1,
    label: "Fruta",
    value: "fruta"
  },
  {
    id: 2,
    label: "Verdura",
    value: "verdura"
  }
];

const Select1 = ({ setFrutaSelect }) => {
  return (
    <>
      <select onChange={(e) => setFrutaSelect(e.target.value)}>
        {options.map((option) => (
          <option key={option.id} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </>
  );
};

export default Select1;

Componente App.js

import React, { useState } from "react";
import "./styles.css";
import Select1 from "./Select1";

const verdura = [
  { id: 1, label: "Lechuga", value: "lechuga" },
  { id: 2, label: "Acelgas", value: "acelgas" },
  { id: 3, label: "Espinacas", value: "espinacas" },
  { id: 4, label: "Apio", value: "apio" }
];
const fruta = [
  { id: 1, label: "Arándanos", value: "arandanos" },
  { id: 2, label: "Manzana", value: "manzana" },
  { id: 3, label: "Pera", value: "pera" }
];

export default function App() {
  const [optionSelect, setFrutaSelect] = useState("");
  console.log(optionSelect);

  return (
    <div className="App">
      <Select1 setFrutaSelect={setFrutaSelect} />
      {/* Traigo el value de la opcion seleccionada en el componente Select y la capturo con el hook setFrutaSelect*/}

      {optionSelect === "fruta" ? (

        <select>
          {fruta.map((option) => (
            <option key={option.id} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>

      ) : (

        <select>
          {verdura.map((option) => (
            <option key={option.id} value={option.value}>
              {option.label}
            </option>
          ))}

        </select>
      )}
    </div>
  );
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.