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 Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
js正则表达式的使用详解
Jul 09 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
express启用https使用小记
May 21 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
node中使用shell脚本的方法步骤
Mar 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 session常见问题集锦及解决办法总结
2007/03/18 PHP
PHP实现下载功能的代码
2012/09/29 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
javaScript实现滚动新闻的方法
2015/07/30 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
python ---lambda匿名函数介绍
2019/03/13 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
python实现大文件分割与合并
2019/07/22 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
python清空命令行方式
2020/01/13 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
中式结婚主持词
2014/03/14 职场文书
《去年的树》教学反思
2014/04/11 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
员工2014年度工作总结
2014/12/09 职场文书
文明家庭事迹材料
2014/12/20 职场文书
小学生差生评语
2014/12/29 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
Jsonp劫持学习
2021/04/01 PHP
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL