需要在单元测试模拟它，百度谷歌了好久都没有。后来认真想想，还是找到办法了。因为我们手动交互某一行为，首先是让它的某些属性发生变化，其次是让它触发某事件。想明白这一点就简单了。让属性发生变化，当然是改动其固有属性，因此 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元素的效果的更多相关文章

  1. JavaScript向select下拉框中加入和删除元素

    JavaScript向select下拉框中加入和删除元素 1.说明 a   利用append()方法向下拉框中加入元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...

  2. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  3. javascript 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格

    首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框 ...

  4. Javascript版选择下拉菜单互移且排序

    效果图如下: 代码如下: <html> <head> <title>Javascript版选择下拉菜单互移且排序</title> <meta ht ...

  5. 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框

    上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...

  6. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  7. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  8. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  9. selenium select 选择下拉框

    实战百度首页设置,浏览偏好设置. 打开首页,在非登录的情况下,查看分析页面元素,我们可以看到,我们首先要点击的是设置, 接着点击,搜索设置, 然后select选择下拉框. select_by_inde ...

随机推荐

  1. bzoj 5334 数学计算

    bzoj 5334 数学计算 开始想直接模拟过程做,但模数 \(M\) 不一定为质数,若没有逆元就 \(fAKe\) 掉了. 注意到操作 \(2\) 是删除对应的操作 \(1\) ,相当于只有 \(1 ...

  2. Loj 2534 异或序列

    Loj 2534 异或序列 考虑莫队离线处理.每加一个数,直接询问 \(a[x]\oplus k\) 的前/后缀数目即可,减同理. 利用异或的优秀性质,可以维护异或前缀和,容易做到每次 \(O(1)\ ...

  3. BZOJ2761: [JLOI2011]不重复数字【set】【傻逼题】

    Description 给出N个数,要求把其中重复的去掉,只保留第一次出现的数. 例如,给出的数为1 2 18 3 3 19 2 3 6 5 4,其中2和3有重复,去除后的结果为1 2 18 3 19 ...

  4. 20179223《Linux内核原理与分析》第一周学习笔记

    第一周实验 尝试创建两个文件,用通配符查找这两个文件:在创建文件的时候,需要同时创建多个文件的方法运行. 根据作业要求,实现一个lilux命令. 根据作业要求添加一个用户loutest,使用sudo创 ...

  5. ubuntu16安装最新版docker

    ubuntu16.04安装最新版docker.docker-compose.docker-machine https://www.cnblogs.com/tianhei/p/7802064.html ...

  6. windows下PyCharm运行和调试scrapy

    Scrapy是爬虫抓取框架,Pycharm是强大的python的IDE,为了方便使用需要在PyCharm对scrapy程序进行调试 python PyCharm Scrapy scrapy指令其实就是 ...

  7. python(十二)：网络编程之ISO/OSI模型

    互联网(Internet)是依据操作系统,在计算机硬件的基础上建立起的通讯机制.它依赖于TCP/IP协议栈. 一.ISO/OSI模型 1.ISO七层模型与OSI五层模型 它们将计算机抽象成了具有层级关 ...

  8. vs2010 C++创建和使用动态链接库(dll)

    一.用C++创建动态链接库项目:  1.打开Microsoft Visual Studio 2010,选择File->New->Project.  2.在NewProject中选择Inst ...

  9. php、打印

    <!DOCTYPE HTML><html><head><meta http-equiv="content-type" content=&q ...

  10. Eclipse的Java开发中jar导入后无法使用包内class的解决方案

    请注意, 本方法只对于自己的包有效, 如果你的类内部互相调用, 此方法会失效, 需要每个类文件都进行一次CTRL+SHIFT+O进行包的导入. 如上图的一个结构, algs4.jar和stdlib.j ...