Как программно изменить select так, чтобы он запускал свое поведение onchange?

это, похоже, не работает:

<select id="mySel" onchange="alert('foo')">
    <option value="a">a</option>
    <option value="b">b</option>
</select>

<script>
dojo.byId('mySel').value = 'b'; // select changes, but nothing is alerted
</script>

(Я использую dojo, но это не имеет значения.)

6 ответов


имя "onchange" немного вводит в заблуждение, если вы не понимаете, что изменение событие и изменяемое значение-это не одно и то же. Событие change возникает, когда пользователь изменяет значение в браузере. Я считаю, что вы можете запустить событие вручную, позвонив dojo.byId('mySel').onchange() после того, как вы программно измените значение. (Возможно, вам придется фактически определить функцию, которая вызывает alert, хотя. Я не делал этого сам.)


это изменит значение, но не вызовет событие onchange. Каждый раз, когда вы изменяете элемент с помощью JavaScript, он не запускает событие (останавливает вас от попадания в проблемы рекурсии*).

Если вы настроили обработчик событий таким образом.

function myHandler(){
  //do whatever stuff here
  changeColor( dojo.byId('mySel') );
}

затем вы можете вызвать это отдельно, после установки значения программно.

примечание (*): Я не эксперт в додзе... поэтому я предполагаю, что они не "добавили" автоматический вызов обработчиков событий, когда вы задайте значение из JavaScript.


вы можете взглянуть на эти вопросы и их ответы : они могут помочь :


вы можете получить доступ к событию "onpropertychange" он содержит свойство в аргументах события, чтобы определить, какое свойство было изменено.

он обнаруживает изменения как "selectedIndex", так и "value" - просто case test "propertyName"

<select id="mySel" onpropertychange="dothis(event);">
    <option value="a">a</option>    
    <option value="b">b</option>
</select>

function dothis(event)
{

    if (event.propertyName == "selectedIndex")
            alert('selection changed');
}

С моей макушки... (в настоящее время используется asp.net JS framework, который довольно abit отличается)


попробуйте назначить selectedIndex вместо этого.


для тех, кто хочет вызвать change событие с использованием javascript.

        var evObj = document.createEvent("HTMLEvents");
        evObj.initEvent("change", true, true);
        var elem = document.getElementById('some-id');
        elem.dispatchEvent(evObj);