Я пытаюсь контролировать изменения в поле выбора (или вложенные элементы option
) с помощью новой функции Mutation Observer. Однако только "setAttribute" запускает обратный вызов наблюдателя мутации для меня.
Вот код, который я использую:
~function(doc, $) {
var select = $('select');
// http://www.w3.org/TR/dom/#mutation-observers
var observer = new WebKitMutationObserver(function(mutations) {
alert(mutations.length + " mutations happened");
});
observer.observe(select, {
// monitor descendant elements – changing `selected` attr on options
subtree: true,
attributes: true
});
// this triggers Observer reaction, but doesn't update select box UI
select.setAttribute('value', 'whee');
// this updates select box UI, but doesn't trigger mutation observer callback
select.value = "whee";
// this also updates the UI, but doesn't trigger mutation observer callback
select.getElementsByTagName('option')[0].selected = true;
//
// neither does manual selecting of options trigger mutation observer unfortunately :(
button.addEventListener('click', function(e) {
e.preventDefault();
// my goal is to react to this change here
select.value = Math.random() > .5 ? "whee" : "whoa";
}, false);
}(document, function(selector) { return document.querySelector(selector); });
И вот этот код в действии http://jsfiddle.net/gryzzly/wqHn5/
Я бы хотел отреагировать на изменения атрибутов (selected
on <option>
или value
on <select>
), любое предложение о том, почему наблюдатель не реагирует, более чем приветствуется!
Я тестирую это в Chrome 18.0.1025.168 на Mac OS X. Производственный код, конечно же, также имеет префикс moz
для конструктора и непереработанную версию, это тестовый код.
UPD.
Протестировал код в Firefox Nightly тоже, и он ведет себя так же, как в Chrome, а также в Chrome Canary. Я заполнил ошибку для обоих браузеров:
- https://bugzilla.mozilla.org/show_bug.cgi?id=757077
- https://code.google.com/p/chromium/issues/detail?id=128991
Прокомментируйте и проголосуйте за эти ошибки, если вы также найдете эту проблему раздражающей.