Estoy trabajando en un UserScript que agrega botones a una página web. Uno de los botones en los que estoy trabajando cuando se hace clic en él creará un div emergente. Estoy tratando de crear una lista desplegable dinámica Seleccionar/Opción dentro de la ventana emergente, con las opciones provenientes de una matriz. Para la segunda lista desplegable, estoy tratando de crear una lista desplegable dinámica basada en la selección en la lista desplegable anterior, pero no estoy seguro de cómo proceder. Me gustaría que las opciones de itemDropList se crearan dinámicamente en función del valor de la opción seleccionada en typeDropList .
¡Gracias por adelantado!
Este es mi código hasta ahora:
var button = document.createElement('button'), button.onclick = prompt; function prompt() { var blockingDiv = document.createElement('div'); blockingDiv.id = 'PopupBackground'; var divPopup = document.createElement('div'); divPopup.id = 'better1ClickSimTChangeCTIPopup'; var content = document.createElement('div'); content.id = 'Content'; var typeDropList = document.createElement('select'); typeDropList.id = 'TypeDropList'; typeDropList.name = 'TypeDropList'; typeDropList.onchange = changeItem(this.value); content.appendChild(typeDropList); var typeOptions = [ { "text": 'Select Type', "value": '', "defaultSelected": true, "selected": true }, { "text": 'Text 1', "value": 'A', "defaultSelected": false, "selected": false }, { "text": 'Text 2', "value": 'B', "defaultSelected": false, "selected": false }, { "text": 'Text 3', "value": 'C', "defaultSelected": false, "selected": false } ]; for (var i = 0; i < typeOptions.length; i++) { var typeOption = document.createElement('option'); typeOption.id = 'TypeOptions'; typeOption.name = 'TypeOptions'; var type = typeOptions[i]; typeOption.appendChild(new Option(type.text, type.value, type.defaultSelected, type.selected)); typeDropList.appendChild(typeOption); } var itemDropList = document.createElement('select'); itemDropList.id = 'ItemDropList'; content.appendChild(itemDropList); var typeItemOptions = { A: ['Item A 1', 'Item A 2', 'Item A 3'], B: ['Item B 1', 'Item B 2', 'Item B 3'], C: ['Item C 1', 'Item C 2', 'Item C 3'] };Hay varios problemas con su objetivo, como se indicó, pero dado que pregunta cómo proceder, le ofrezco estas sugerencias.
Mantenga todo en un solo DOM, es decir, una sola página web con un solo contexto. Es posible que ya esté haciendo esto, pero si no es así, su ventana emergente seguramente le causará problemas para mantener todo concurrente.
Cree su primer menú desplegable (selección y opciones) y haga que funcione a su satisfacción colocando los "resultados" en la memoria global. Es decir, defina las variables de resultado utilizando var.
Use la consola para asegurarse de tener los valores correctos para crear su segundo control desplegable.
¡Prueba, Prueba, PRUEBA! Utilice las herramientas integradas de Javascript para proceder paso a paso y ¡buena suerte!
Según su código, parece que está tratando de hacer todo en una sola función de Javascript. Necesita dividir esto en varios módulos. Seguramente requerirá al menos dos funciones. Recuerde usar buenas técnicas de diseño, ¡el código modular es la respuesta aquí!