js 触发select onchange事件代码


Posted in Javascript onMarch 20, 2014

select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,如果在js中给select或text赋值,则无法触发onchang事件,
例如,在页面加载完成以后,需要触发一个onChange事件,在js中用document.getElementById("province").value="湖北";直接给select或text赋值是不行的,要想实现手动触发onchange事件,需要在js给select赋值后,加入下面的语句

document.getElementById("province").fireEvent('onchange') 来实现,

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<script type="text/javascript"> 
var provinces = new Array(); 
provinces["湖北"] = ["武汉","襄阳","随州","宜昌","十堰"]; 
provinces["四川"] = ["成都","内江","达州"]; 
provinces["河南"] =["郑州","南阳","信阳","漯河"]; 
function changeProvince() 
{ 
var prov = document.getElementById("province").value; 
var city =document.getElementById("city"); 
city.options.length =0; 
for(var i in provinces[prov]) 
{ 
city.options.add(new Option(provinces[prov][i],provinces[prov][i])); 
} 
} 
window.onload = function(){ 
var province = document.getElementById("province"); for(var index in provinces) 
{ 
//alert(index); 
province.options.add(new Option(index,index)); 
} 
province.fireEvent("onchange"); 
}; 
</script> 
</head> 
<body> 
省份:<select id="province" onchange= "changeProvince()"></select> 
城市:<select id="city"></select> 
</body> 
</html>
Javascript 相关文章推荐
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
基于datagrid框架的查询
Apr 08 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
ie9 提示'console' 未定义问题的解决方法
Mar 20 #Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 #Javascript
$.each与$().each的区别示例介绍
Mar 20 #Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 #Javascript
js图片延迟技术一般的思路与示例
Mar 20 #Javascript
可恶的ie8提示缺少id未定义
Mar 20 #Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 #Javascript
You might like
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
jQuery textarea的长度进行验证
2009/05/06 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
js实现旋转木马效果
2017/03/17 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
python路径的写法及目录的获取方式
2019/12/26 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
如何通过命令行进入python
2020/07/06 Python
vue项目实现分页效果
2021/03/24 Vue.js
工作态度检讨书
2014/02/11 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书