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 相关文章推荐
改变隐藏的input中value的值代码
Dec 30 Javascript
Javascript基础知识(二)事件
Sep 29 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
vue2.0 watch里面的 deep和immediate用法说明
Oct 30 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
星际中的相关伤害
2020/03/04 星际争霸
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
js 文本滚动效果的实例代码
2013/08/17 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python类的继承和多态代码详解
2017/12/27 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python实战教程之自动扫雷
2018/07/13 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
机电专业大学生职业规划书范文
2014/02/25 职场文书
毕业设计说明书
2014/05/07 职场文书
公司会议策划方案
2014/05/17 职场文书
美国留学经济担保书
2014/05/20 职场文书
离婚财产分配协议书
2014/10/21 职场文书
个人培训总结
2015/03/05 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
Django显示可视化图表的实践
2021/05/10 Python