js触发select onchange事件的小技巧


Posted in Javascript onAugust 05, 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的图片左右无缝滚动插件
May 23 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
jquery中each遍历对象和数组示例
Aug 05 #Javascript
js 动态修改css文件的方法
Aug 05 #Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 #Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 #Javascript
JavaScript中的函数重载深入理解
Aug 04 #Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 #Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 #Javascript
You might like
php&amp;java(三)
2006/10/09 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
php批量删除操作代码分享
2017/02/26 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
js实现搜索栏效果
2018/11/16 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
Python字符串拼接六种方法介绍
2017/12/18 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Django中Middleware中的函数详解
2019/07/18 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
检察院起诉书
2015/05/20 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书