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 相关文章推荐
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
JavaScript实现简单计时器
Jun 22 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使用imagick读取PDF生成png缩略图的两种方法
2014/03/20 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
在Python的web框架中配置app的教程
2015/04/30 Python
python绘制直线的方法
2018/06/30 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
python str字符串转uuid实例
2020/03/03 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
运动会解说词100字
2014/01/31 职场文书
世界读书日的活动方案
2014/08/20 职场文书
解除同居协议书
2015/01/29 职场文书
同意落户证明
2015/06/19 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
python析构函数用法及注意事项
2021/06/22 Python