Estoy tratando de escribir un bot para un sitio web. Estoy atascado en la selección de sublistas. Puedo establecer un valor para una lista, pero desafortunadamente otra lista no se actualiza a través de la lista seleccionada.
Por ejemplo, establecí la categoría "A" en el valor "B" usando document.getElementById('A').value = "B"; pero la sublista no se actualiza con los modelos "B".
Estoy usando Chrome Console para verificar mis validaciones de codificación.
Esto es bastante trivial de hacer, realmente depende de dónde está cargando las opciones derivadas y cómo (obtener del servidor, incluido en DOM, etc.). Normalmente, la lista se carga dinámicamente como JSON y la analizará y completará el cuadro de selección con los valores correspondientes.
Aquí hay un pequeño ejemplo de una de las muchas formas de hacerlo: supongo que comprende que los values son todos los valores requeridos que está usando y cargando desde su servidor:
//Load the required values from server or add them to the page statically: //You can also fetch them one by one... you get the point. var values = { fruits : [ { value : "apple", text : "Apple"}, { value : "orange", text : "Orange"} ], drinks : [ { value : "lemonade", text : "Lemonade"}, { value : "water", text : "Water"}, { value : "coffee", text : "Coffee"}, { value : "tea", text : "Tea"} ] }; //The dropdown: let dropdown = document.getElementById('main-list'); //Attach a `change` event handler: dropdown.addEventListener( 'change', function() { //Clear the populate list first: const populate = document.getElementById('populate'); populate.innerText = null; //The selected value - which defines what to load: const load = this.value; //Add the options to the populate select element: for (const opt of (values[load] || [])) { let option = document.createElement('option'); option.text = opt.text; option.value = opt.value; populate.add(option); } }, false ); <select id="main-list"> <option value="none">Please select</option> <option value="fruits">Fruits</option> <option value="drinks">Drinks</option> </select> <select id="populate"> </select>Encontré la respuesta:
document.querySelector('#id').dispatchEvent(new Event('change', { 'bubbles': true }))