I am trying to write a bot for a website. I am stuck at selecting sub-lists. I can set a value for a list, but unfortunately other list is not update via the selected list.
For example, I set "A" category to value "B" using document.getElementById('A').value = "B"; but sub-list is not updated with "B" models.
I am using Chrome Console to check my coding validations.
This is pretty trivial to do, it really depends where you are loading the derived options from and how (fetch from server, included in DOM etc..). Normally the list is dynamically loaded as JSON and you will parse it and populate the select box with the corresponding values.
Here is a small example of one of many ways to do that - I assume you understand that values is all the required values you are using and loading from your server:
//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>Found the answer:
document.querySelector('#id').dispatchEvent(new Event('change', { 'bubbles': true }))