Запуск события

Question

У меня есть целевой сайт, где есть раскрывающееся меню.

<select class="categories-options" data-level="1" name="level1-option" id="level1-option" required=""> 
    <option value="">default</option> 
    <option value="p1" data-href="/callback/p1">P1</option> 
    <option value="p2" data-href="/callback/p2">P2</option> 
    <option value="p3" data-href="/callback/p3">P3</option> 
</select> 

Когда элемент выбран из меню, это вызывает «изменение» событие и функция вызывается, когда происходит это событие. Я отлаживал это событие с помощью Chrome, и вы можете увидеть вывод отладки, когда я выбрал элемент из выпадающего меню. Я снял снимок с отладчика.

Теперь позвольте мне объяснить, что я пытаюсь сделать. Я использую яваскрипта функцию, чтобы выбрать пункт из выпадающего меню, используя следующий код:

var id= document.getElementById('level1-option'); 
setSelectedValue(id, "p2"); 
$('#level1-option').trigger("select"); 

В последней строке, я стараюсь, чтобы вызвать такое же событие, которое происходит первоначально на веб-странице, как будто я вручную выбран пункт , однако это ничего не вызывает. | Я вижу на выходе отладки, что событие запускается классом. Я пробовал много разных вещей, но не работал. Может ли кто-нибудь пролить свет на эту проблему? Как я могу инициировать одно и то же событие, которое происходит на этой веб-странице, используя jquery или javascript?

Answer 1

Ваш код:

$('#level1-option').trigger("select"); 

... вызовет событие называется select (который не связан с величиной изменения поля формы), но это событие вы остановились на в отладчик change, не select:

Если вы хочу, чтобы вызвать change события, вызвать change события:

$('#level1-option').trigger("change"); 
// Difference is here -------^ 

---

Side Примечание: Поскольку вы используете JQuery, ваш код может быть проще, вам не нужно getElementById или setSelectedValue:

$('#level1-option').val("p2").trigger("change"); 

Answer 2

Попробуйте

$('#level1-option').trigger("change");