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 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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
php5 图片验证码实现代码
2009/12/11 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python如何统计代码运行的时长
2019/07/24 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
大学生个人自荐信
2014/02/24 职场文书
入党推优材料
2014/06/02 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
白鹤梁导游词
2015/02/06 职场文书
学期个人自我总结
2015/02/13 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL