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 相关文章推荐
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
用vscode开发vue应用的方法步骤
May 06 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
为你总结一些php系统类函数
2015/10/21 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
js 毫秒转天时分秒的实例
2017/11/17 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
Python实现合并两个列表的方法分析
2018/05/28 Python
深入浅析Python传值与传址
2018/07/10 Python
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
西尔斯百货官网:Sears
2016/09/06 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
毕业生文员求职信
2013/11/03 职场文书
营业经理岗位职责
2013/11/10 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
个人思想政治总结
2015/03/05 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
导游词之南京中山陵
2019/11/27 职场文书
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL