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>

當然現在這樣做是不夠嚴謹,因為我是用人腦承擔了一些計算量。我們需要知道它是否發生了改變。因此有一個比較前后值的函數,這個可以看這里


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM