Ruby's Louvre

每天学习一点点算法

导航

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>

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

posted on 2014-03-17 17:37  司徒正美  阅读(3556)  评论(0)  编辑  收藏  举报