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下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
详解JS函数重载
Dec 04 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
vue的一个分页组件的示例代码
Dec 25 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
vue实现图片裁剪后上传
Dec 16 Vue.js
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
微信小程序实现录音Record功能
May 09 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设置静态内容缓存时间的方法
2014/12/01 PHP
Yii配置文件用法详解
2014/12/04 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Python常用断言函数实例汇总
2020/11/30 Python
中国宠物用品商城:E宠商城
2016/08/27 全球购物
学前教育学生自荐信范文
2013/12/31 职场文书
经理助理岗位职责
2014/03/05 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
共青团员自我评价范文
2014/09/14 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
学生会个人总结范文
2015/02/15 职场文书
创先争优个人总结
2015/03/04 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
推广普通话主题班会
2015/08/17 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书