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 ...
随机推荐
- Codeforces 280C Game on tree【概率DP】
Codeforces 280C Game on tree LINK 题目大意:给你一棵树,1号节点是根,每次等概率选择没有被染黑的一个节点染黑其所有子树中的节点,问染黑所有节点的期望次数 #inclu ...
- Quartz 2D编程指南－ PDF文档的创建、显示及转换
PDF文档存储依赖于分辨率的向量图形.文本和位图,并用于程序的一系列指令中.一个PDF文档可以包含多页的图形和文本.PDF可用于创建跨平台.只读的文档,也可用于绘制依赖于分辨率的图形. ...
- 重温CLR（十四） 可空类型
我们知道,一个值类型的变量永远不可能为null.它总是包含值类型本身.遗憾的是,这在某些情况下会成为问题.例如,设计一个数据库时,可将一个列定义成为一个32位的整数,并映射到FCL的Int32数据类型 ...
- 《DSP using MATLAB》示例Example 8.20
%% ------------------------------------------------------------------------ %% Output Info about thi ...
- [语法]C语言中二维数组做输入参数
C语言中二维数组做输入参数时, 可以同时指定各维长度, 可以只指定第二维的长度, 不可以只指定第一维的长度, 不可以各维长度都不指定. 一句话总结:要指定至少指定第二维,都不指定是不行的. 具体栗子如 ...
- jeecg中List页面标签的用法
1.t:datagrid的常用属性 1. <t:datagrid name="jeecgDemoList" checkbox="true" sortNam ...
- JVM内存管理之GC算法精解（复制算法与标记/整理算法）
本次LZ和各位分享GC最后两种算法,复制算法以及标记/整理算法.上一章在讲解标记/清除算法时已经提到过,这两种算法都是在此基础上演化而来的,究竟这两种算法优化了之前标记/清除算法的哪些问题呢? 复制算 ...
- (转)win7+iis7.5+asp.net下 CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files 解决方案
本文转载自:http://www.cnblogs.com/finesite/archive/2011/01/28/1946940.html 网上搜的解决方案但在我的环境下仍旧没有解决,我的方法如下: ...
- Ladder面积
package com.hanqi; import javax.swing.plaf.synth.SynthSeparatorUI; //梯形 public class Ladder { double ...
- scrapy_redis 实现多进程配置部分代码
# 启用Redis调度存储请求队列SCHEDULER = "scrapy_redis.scheduler.Scheduler"# 确保所有的爬虫通过Redis去重DUPEFILTE ...