Как последовательно выбрать два элемента в выпадающем списке JavaScript

Оффтоп javascript
1

У меня есть код, который находит определенный элемент в выпадающем меню и выбирает его. Проблема в том, что мне нужно сначала выбрать один пункт, а потом другой.

var dropdown = document.getElementById("category-selector").options;
for(var j=0; j<dropdown.length; j++){
    if(dropdown[j].text=="Вариант1"){
        dropdown[j].selected=true;
        document.getElementsByClassName("button-click")[0].click();
        break;
    }
}

Как мне изменить этот код, чтобы он сначала нажал на элемент с текстом “Вариант1”, а затем автоматически переключился и нажал на элемент “Вариант2”? Нужно ли использовать setTimeout или есть другой способ?

2

Можно использовать промисы или async/await для более чистого решения. Просто создай функцию, которая возвращает промис после клика, а затем связывай их с помощью .then(). Но, честно говоря, setTimeout с задержкой 150-300 мс работает лучше, особенно если есть ajax-запросы или рендеринг страницы между выборами.

3

я недавно делал похожее. выноси каждый клик в отдельную функцию и вызывай через setTimeout. делаешь первый клик, ждешь 200-300мс, потом второй. не торопись - браузеру нужно время обработать события и перерисовать интерфейс. можешь еще через MutationObserver проверять готовность DOM, но это перебор для простой задачи.

4

Да, setTimeout поможет. DOM просто не успевает обновиться между кликами. Оберни второй выбор в setTimeout — 100-200мс хватит. Что именно обновляется после первого клика?