Tengo algunos problemas para configurar una hoja dinámica de Google para obtener datos. Si el valor de la opción va después de 10, no funcionará; el código devuelve el valor como 1 y luego 0 por separado. Y así sucesivamente, el valor 11 sería 1 y 1.

¡Cualquier ayuda sería genial y muchas gracias!

 <select name="examples" id="selectEvents" class="my-events"> <option value="" placeholder="select" selected>Select</option> </select> <h2 class="event-name" ></h2> <h3 class="event-info" ></h3> <script> //variables for spreadsheet const eventName = document.querySelector('.event-name'); const eventInfo = document.querySelector('.event-info'); //variables for sheet const sheetId = '1wJp22oIlG29X6FDszaPoh71IvbwrZYoWRqwwYy9gbQg'; const base = `https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?`; const sheetName = 'sheet1'; const query = encodeURIComponent('Select *'); const url = `${base}&sheet=${sheetName}&tq=${query}`; fetch(url) .then(res => res.text()) .then(rep => { //Remove additional text and extract only JSON: const jsonData = JSON.parse(rep.substring(47).slice(0, -2)); const dataRows = jsonData.table.rows; const select = document.getElementById('selectEvents'); for (const r of dataRows) { select.options[select.options.length] = new Option(rc[1].v, Number(select.options.length + 1)); } const selectElement = document.querySelector('.my-events'); selectElement.addEventListener('change', event => { for (let i of Object.values(selectEvents.value)) { if (selectEvents.value === i) { eventName.textContent = jsonData.table.rows[i - 2].c[1].v; eventInfo.textContent = jsonData.table.rows[i - 2].c[2].v; } } }); }); </script>