Estoy tratando de crear un código para llenar un formulario en el que las opciones de algunos selectores dependen de lo que se seleccione en un selector anterior. Estoy usando la biblioteca jQuery para crear los eventos.

Me gustaría poder hacer que el evento pueda observar las variables incluso cuando el código que crea el evento ya haya terminado.

A continuación se muestra un ejemplo de lo que tengo que hacer.

 function preValForm() { App.get('params').then((params) => { let devices = [] params.devices.forEach(i => { // Here is the params Object { devices: [[...]] , stock: [[...]] } if (i[0] == "Mobile" && devices.indexOf(i[1]) == -1) { // Not insert duplicates to the array devices.push(i[1]) // Insert value to array if isn't duplicate } }) $('#listDevices').html(devices.map(d => { return `<option value="${d}">${d}</option>` }).join('')) // Insert option values to a select element in DOM // Here is the problem ... $('#listDevices').on('change', (ev) => { // Create the event when selector #listDevices changes let stock = [] // Declare variable stock params.stock.forEach(s => { // ! params is not defined **! -- This is the error** if (s[1] == ev.target.value && stock.indexOf(s[1]) == -1) { stock.push(s[1]) } }) $('#stockOptions').html(stock.map(k => { return `<option value="${k}">${k}</option>` }).join('')) }) }) }

He visto que esto se puede hacer, por ejemplo, con la biblioteca SweetAlert2, ve este comportamiento donde define un evento llamado preConfirm y cuando se ejecuta, las variables aún están visibles para ese evento. Me gustaría poder hacer algo similar a ese comportamiento, que cuando hago un cambio en la selección, el evento se ejecuta y ese evento reconoce mi variable 'parámetros'.

Gracias