js触发select onchange事件的小技巧

 更新时间:2014年08月05日 10:27:25   投稿:whsnow  
select 或text的onchange事件需要手动改变select或text的值才能触发,下面有个不错的方法可以通过js触发select onchange事件

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短信验证码如何实现

    我们在使用移动、电信等运营商网上营业厅的时候,为确保业务的完整和正确性,经常会需要用到短信的验证码。最近因为某省业务需要,也做了个类似的功能
    2016-01-01
  • JavaScript面向对象继承原理与实现方法分析

    JavaScript面向对象继承原理与实现方法分析

    这篇文章主要介绍了JavaScript面向对象继承原理与实现方法,结合实例形式分析就面向对象程序设计中原形、对象、继承的相关概念、原理、实现方法及操作注意事项,需要的朋友可以参考下
    2018-08-08
  • 纯JS代码实现气泡效果

    纯JS代码实现气泡效果

    js气泡效果,在项目需求中经常遇到。今天小编把大概实现步骤分享到脚本之家平台,感兴趣的朋友可以参考下
    2016-05-05
  • 微信小程序时间选择插件使用详解

    微信小程序时间选择插件使用详解

    这篇文章主要为大家详细介绍了微信小程序时间选择插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 详解Webpack实战之构建 Electron 应用

    详解Webpack实战之构建 Electron 应用

    本篇文章主要介绍了Webpack实战之构建 Electron 应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • JS+HTML5 Canvas实现简单的写字板功能示例

    JS+HTML5 Canvas实现简单的写字板功能示例

    这篇文章主要介绍了JS+HTML5 Canvas实现简单的写字板功能,结合实例形式分析了js结合HTML5 canvas特性的图形绘制相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • 再论Javascript的类继承

    再论Javascript的类继承

    说到Javascript的类继承,就必然离不开原型链,但只通过原型链实现的继承有着不少缺陷。
    2011-03-03
  • javascript实现tab切换的两个实例

    javascript实现tab切换的两个实例

    这篇文章主要介绍了javascript实现tab切换的两个实例,是对之前方法原理的进一步延伸,需要深入了解的同学可以参考一下
    2015-11-11
  • js判断元素是否隐藏的方法

    js判断元素是否隐藏的方法

    这篇文章主要介绍了js判断元素是否隐藏的方法,需要的朋友可以参考下
    2014-06-06
  • 无阻塞加载脚本分析[全]

    无阻塞加载脚本分析[全]

    script标签的阻塞行为会对页面性能产生负面影响,大多数浏览器在下载或执行脚本的同时,会阻塞下载位于它之后的资源,也会阻塞渲染位于它之后的元素。
    2011-01-01

最新评论