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>

当然现在这样做是不够严谨,因为我是用人脑承担了一些计算量。我们需要知道它是否发生了改变。因此有一个比较前后值的函数,这个可以看这里

如果您觉得这文章对您有帮助,可以打赏点钱给我,鼓励我继续写博,我的支付宝

javascript 模拟选择下拉框的某一个option元素的效果,布布扣,bubuko.com

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

上一篇:error: object file .git/objects/...


下一篇:java 学习流程图