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 动态修改样式和层叠样式表代码
Apr 27 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
Javascript如何实现扩充基本类型
Aug 26 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
详解Python中的strftime()方法的使用
2015/05/22 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Python实现一个优先级队列的方法
2020/07/31 Python
Python类型转换的魔术方法详解
2020/12/23 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
廉洁使者实施方案
2014/03/29 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
难忘的一课教学反思
2014/04/30 职场文书
购房意向书
2014/08/30 职场文书
在人间读书笔记
2015/06/30 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python