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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
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 和 COM
2006/10/09 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
php头像上传预览实例代码
2017/05/02 PHP
php格式文件打开的四种方法
2018/02/24 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
Python  unittest单元测试框架的使用
2018/09/08 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
Python:slice与indices的用法
2019/11/25 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
python如何调用百度识图api
2020/09/29 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
四风批评与自我批评发言稿
2014/10/14 职场文书
校本培训个人总结
2015/02/28 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript