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元素的效果的更多相关文章
- JavaScript向select下拉框中加入和删除元素
JavaScript向select下拉框中加入和删除元素 1.说明 a 利用append()方法向下拉框中加入元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...
- JavaScript向select下拉框中添加和删除元素
JavaScript向select下拉框中添加和删除元素 1.说明 a 利用append()方法向下拉框中添加元素 b 利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...
- javascript 可多选的下拉框 multiselect 动态删除option值，动态添加option值，动态生成表格
首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框 ...
- Javascript版选择下拉菜单互移且排序
效果图如下: 代码如下: <html> <head> <title>Javascript版选择下拉菜单互移且排序</title> <meta ht ...
- 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框
上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...
- JavaScript解决select下拉框中的内容太长显示不全的问题
JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...
- JavaScript获取select下拉框中的第一个值
JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- selenium select 选择下拉框
实战百度首页设置,浏览偏好设置. 打开首页,在非登录的情况下,查看分析页面元素,我们可以看到,我们首先要点击的是设置, 接着点击,搜索设置, 然后select选择下拉框. select_by_inde ...
随机推荐
- BZOJ2724 蒲公英 【分块】
BZOJ2724 蒲公英 题目背景 亲爱的哥哥: 你在那个城市里面过得好吗? 我在家里面最近很开心呢.昨天晚上奶奶给我讲了那个叫「绝望」的大坏蛋的故事的说!它把人们的房子和田地搞坏,还有好多小朋友也被 ...
- Mac上获取文件md5 值
mac 上获取一个文件的md5值如下 在terminal 上输入下面命令行即可: 方法一: //备注 AccountPassword/check 是全路径 也可以相对路径,我这里是相对路径,用来测试用 ...
- PHP的网站主要攻击方式有哪些
1.命令注入(Command Injection) 2.eval注入(Eval Injection) 3.客户端脚本攻击(Script Insertion) 4.跨网站脚本攻击(Cross Site ...
- vs2013环境下boost配置
编译boost库的过程这里暂时不写. 先写在vs2013下的boost配置. 新建一个工程, 1, 属性->C/C++,在附加包含目录添加或编辑Boost的文件路径, D:\boost_1_5 ...
- 关于RAS加密中pfx格式提取字符串私钥 (转)
openssl 使用以下命令 如果如果执行出错,请查看是否安装环境或在命令前面加上openssl --提取出来的无法直接使用 pkcs12 -in zhaoshang2.pfx -nocerts -n ...
- Face detection in color images, 彩色图像中的人脸检测
人脸检测在视频监督,人机交互,人脸识别和人脸图像数据库管理等应用领域处于很重要的地位. 论文<Face detection in color images>中给出一种在YCbCr空间检测人 ...
- 黄聪：使用Add-on SDK开发火狐扩展
2014年3月7号更新:火狐已经关闭Add-on SDK服务啦!我也转用360急速浏览器来开发浏览器插件了. 如果精通JS.HTML.CSS开发的朋友,直接看这个教程估计就能懂了 ---------- ...
- kafka 常用命令
Kafka 解压,进入kafka目录下的bin目录 启动zk nohup ./zookeeper-server-start.sh ../config/zookeeper.properties & ...
- H3C IRF2的三种配置情况
H3C-IRF2-虚拟交换技术-强列鼻视看我文档不下载的呵呵.看了下面的东西你就会配IRF了. H3C-5120-HI H3C-5120S H3C5800 先到H3C官网上面看那些交换机支持IR ...
- 第二章 伪分布式安装hadoop hbase
安装单机模式的hadoop无须配置,在这种方式下,hadoop被认为是一个单独的java进程,这种方式经常用来调试.所以我们讲下伪分布式安装hadoop. 我们继续上一章继续讲解,安装完先试试SSH装 ...