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 学习历程和心得分享
Dec 12 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
php的ajax简单实例
2014/02/27 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
舞蹈教育学专业推荐信
2013/11/27 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
后勤工作职责
2013/12/22 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
Go语言基础map用法及示例详解
2021/11/17 Golang