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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
jquery 模式对话框终极版实现代码
Sep 28 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
谈谈node.js中的模块系统
Sep 01 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
javascript数组详解
2014/10/22 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
机关保密承诺书
2014/06/03 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
广播体操比赛主持词
2015/06/29 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
文艺委员竞选稿
2015/11/19 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
对象析构函数__del__在Python中何时使用
2022/03/22 Python
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技