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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
javascript常用对话框小集
Sep 13 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
深入浅析JS中的严格模式
Jun 04 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 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开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
简述php环境搭建与配置
2016/12/05 PHP
php依赖注入知识点详解
2019/09/23 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
精彩的大学生自我评价
2013/11/17 职场文书
初一地理教学反思
2014/01/16 职场文书
护士在校生自荐信
2014/02/01 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
市场开发计划书
2014/05/07 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis