javascript 模拟选择下拉框的某一个option元素的效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

需要在单元测试模拟它，百度谷歌了好久都没有。后来认真想想，还是找到办法了。因为我们手动交互某一行为，首先是让它的某些属性发生变化，其次是让它触发某事件。想明白这一点就简单了。让属性发生变化，当然是改动其固有属性，因此 setAttribute(aaa,bbb)便出局了，因此它是用来设置自定义属性（IE678另谈，那是怪胎）。想触发事件，我们可以用fireEvent或dispathEvent，阿狸从雅虎的YUI搞了一个event-simulate，想得更加周全，大家想深入可以参考一下。

下面就是我的成果了：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="avalon.js"></script>
<script> var model = avalon.define("test", function(vm) {
vm.array = ["aaa", "bbb", "ccc", "ddd"]
vm.selected = "ddd"
vm.$watch("selected", function(a) {
avalon.log(model.$model.selected)
})
})
function fireEvent(element, event) {
if (document.createEventObject) {
var evt = document.createEventObject();
return element.fireEvent('on' + event, evt)
} else {
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true)
return !element.dispatchEvent(evt);
}
}
setTimeout(function() {
var el = document.getElementById("aaa")
el.options[1].selected = true//改动属性
fireEvent(el, "change")//触发事件
}, 3000) </script>
</head>
<body>
<div ms-controller="test">
<select ms-duplex="selected" id="aaa">
<option ms-repeat="array" ms-value="el">{{el}}</option>
</select>
</div>
</body>
</html>