Cómo actualizar automáticamente las opciones en un segundo menú desplegable según la selección en un primer menú desplegable sin usar una base de datos

Tienes dos menús desplegables donde las opciones no se recuperan de una base de datos. El primer menú desplegable permite al usuario seleccionar una categoría. Las opciones del segundo menú desplegable dependen de la selección en el primer menú desplegable.

Por ejemplo, si el usuario elige la Primera opción en el primer menú desplegable, el segundo menú desplegable debería mostrar las opciones Smartphone y Cargador. Si el usuario cambia su selección a la opción Segunda, el segundo menú desplegable ahora debería mostrar las opciones Baloncesto y Voleibol.

Implementación sin utilizar una base de datos

<option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>

"1": ["Smartphone", "Charger"],
"2": ["Basketball", "Volleyball"]

};

// Borra las opciones en el segundo menú desplegable
const itemsDropdown = document.getElementById("items") ;
itemsDropdown.innerHTML = "";

// Agrega las nuevas opciones según la categoría seleccionada
const Opciones seleccionadas = opciones[categoría.valor];
for (opción constante de Opciones seleccionadas) {

const newOption = document.createElement("option");
newOption.value = option;
newOption.textContent = option;
itemsDropdown.appendChild(newOption);

}
}

Esta implementación utiliza un objeto JavaScript para almacenar las opciones para cada categoría. Cuando el usuario cambia la selección en el primer menú desplegable, se llama a la función changeSecondDropdown, que actualiza las opciones en el segundo menú desplegable según la categoría seleccionada.