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 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
js获取php变量的实现代码
Aug 10 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
Vue项目移动端滚动穿透问题的实现
May 19 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 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学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
表单内同名元素的控制
2006/11/22 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
初识Node.js
2015/03/20 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
python之pandas用法大全
2018/03/13 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
python list转矩阵的实例讲解
2018/08/04 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
幼儿园园长自我鉴定
2013/10/22 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
承诺书模板大全
2015/05/04 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript