![](/img/trans.png)
[英]How do I ensure a select change event fires AFTER ngmodel is set in Angular2?
[英]How can I ensure that updating a select with javascript also fires the onchange event listener?
在HTML DOM中,元素對象具有許多模擬用戶與元素交互的方法。
例如
.click()
.focus()
.blur()
如果給定元素具有附加的onclick
事件偵聽器:
myElement.addEventListener('click', myFunction, false);
然后可以使用javascript觸發該事件監聽器:
myElement.click();
但是,如果有問題的元素是什么一個<option>
在<select>
,並在事件監聽器<select>
是:
mySelect.addEventListener('change', myFunction, false);
該事件監聽器如何觸發?
完整示例:
var boxes = document.getElementsByClassName('box'); var clickBox = boxes[0]; var hoverBoxForClickBox = boxes[1]; var hoverBoxForSelect = boxes[2]; var select = document.getElementsByTagName('select')[0]; var options = select.getElementsByTagName('option'); function updateOption() { for (var i = 0; i < options.length; i++) { if (options[i].selected === true) { options[i].removeAttribute('selected'); } } options[1].selected = true; } clickBox.addEventListener('click', function(){console.log('Clickbox has been clicked');}, false); hoverBoxForClickBox.addEventListener('mouseover', function(){clickBox.click();}, false); select.addEventListener('change', function(){console.log(select.value + ' has been selected');}, false); hoverBoxForSelect.addEventListener('mouseover', updateOption, false);
.box { display: inline-block; width: 100px; height: 100px; color: rgb(255, 255, 255); font-weight: bold; line-height: 100px; text-align: center; font-family: arial, helvetica, sans-serif; cursor: pointer; } .clickbox { background-color: rgb(255, 0, 0); } .hoverbox { background-color: rgb(0, 0, 255); } select { margin-right: 36px; }
<div class="box clickbox">Click Me</div> <div class="box hoverbox">Hover Me</div> <select> <option value="option-1">Option 1</option> <option value="option-2">Option 2</option> <option value="option-3">Option 3</option> <option value="option-4">Option 4</option> <option value="option-5">Option 5</option> </select> <div class="box hoverbox">Hover Me</div>
您可以看到,當將第二個鼠標懸停在上方時, <option>
始終會變回Option 2 ,但是...事件監聽器不會觸發。
為什么不擺脫匿名函數並使用一個好的舊命名函數呢?
https://jsfiddle.net/4terzna8/
片段:
function onChangeSelect(){
console.log(select.value + ' has been selected');
}
function updateOption() {
for (var i = 0; i < options.length; i++) {
if (options[i].selected === true) {
options[i].removeAttribute('selected');
}
}
options[1].selected = true;
onChangeSelect();
}
select.addEventListener('change', onChangeSelect, false);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.