需要在单元测试模拟它，百度谷歌了好久都没有。后来认真想想，还是找到办法了。因为我们手动交互某一行为，首先是让它的某些属性发生变化，其次是让它触发某事件。想明白这一点就简单了。让属性发生变化，当然是改动其固有属性，因此 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. LOJ2321. 「清华集训 2017」无限之环【费用流】

    LINK 很好的一道网络里题 首先想插头DP的还是出门左转10分代码吧 然后考虑怎么网络流 首先要保证没有漏水 也就是说每个接口一定要有对应的接口 那么发现每个点只有可能和上下左右四个点产生联通关系 ...

  2. window10 下 php7.0 添加Sqlserver扩展

    第一步.7.0.x 7.0.x的扩展下载地址: Microsoft Drivers for PHP for SQL Server  https://www.microsoft.com/en-us/do ...

  3. 电源lc滤波及单点接地（转载）

    1.在一个高速数字电路设计里面,看到在电源部分进行了如下的处理.不过怎么都不能理解,如果说1uF和0.1uF电容并联,这块处理是一个经验值.那么前面的LC滤波参数,参数又是如何确定的?DVDD-in输 ...

  4. uwsgi配置理解

    最近使用uwsgi 部署了flask应用,出现了不少问题,仔细查阅了一下资料以及翻看了官方文档,就对自己了解到的做个总结~~ 一.http/http-socket/socketuwsgi开头当然少不了 ...

  5. 在CentOS上把MySQL从5.5升级到5.6（转）

    http://www.th7.cn/db/mysql/201408/66064.shtml 在CentOS上把MySQL从5.5升级到5.6 摘要:本文记录了在CentOS 6.3上,把MySQL从5 ...

  6. bzoj 2406 矩阵——有源汇上下界可行流

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2406 二分答案.把 b 的 n 个行作为一排, m 个列作为一排,每行和每列之间连上下界为 ...

  7. linux文本处理命令 一

    1,cut 主要的用途在于将同一行里面的数据进行分解 cut -d ‘分隔符’ -f   ‘第几段’   和-f同时使用 -c    字符区间  截取字符区间 2,grep   cut 是在一行讯息当 ...

  8. 用活firewalld防火墙之service

    原文地址:http://www.excelib.com/article/291/show 前面学生已经给大家介绍了在firewalld中service的概念以及在zone中怎么使用service,但是 ...

  9. java代码---------打印正三角形

    总结:手打一遍 public class aaa{ public static void main(String []args){ for(int i=1;i<10;i++){ for(int ...

  10. java代码--------构造方法的调用

    总结: package com.sads; //构造方法何时被调用, //构造方法里的内容先执行 public class Sdw { static { System.out.println(&quo ...