Estoy intentando crear un cuadro desplegable dinámico basado en el selectedIndex de otro cuadro desplegable. Necesito ayuda para escribir una función para lograr esto y esperaba que alguien pudiera ayudarme a terminar esta función. También necesito que el value y el text de las opciones sean lo que hay en la matriz. Esto es lo que tengo hasta ahora:

 <form id="myForm"> <select id="typeSelect"> <option value="" disabled>--- Select Type ---</option> <option value="Type 1">Type 1</option> <option value="Type 2">Type 2</option> <option value="Type 3">Type 3</option> </select> <select id="itemSelect"></select> </form> < script type = "text/javascript" > var typeSelect = document.querySelector('#typeSelect'); typeSelect.addEventListener('change', onChange); function onChange() { let itemSelect = document.querySelector('#itemSelect'); let typeIndex = typeSelect.selectedIndex; let itemOptions = { 0: ['--- Select Type ---'], 1: ['--- Select Item ---', 'Item 1', 'Item 2' ], 2: ['--- Select Item ---', 'Item 1', 'Item 2' ], 3: ['--- Select Item ---', 'Item 1', 'Item 2' ] }; for (var i = 0; i < itemSelect.length; i++) { itemSelect.length = 0; } } </script>