在firefox中, 怎么检测select的选择项因js赋值发生了变化
在firefox中, 如何检测select的选择项因js赋值发生了变化
以上代码, 在IE是能检测到变化的, 但是在firefox中就不行了。 搜索了半天, firefox也只在文本框中有一个oninput事件, select还是束手无策。 哪位大侠能解此难题?
当然, 不要告诉我用什么setInterval或者js函数改变时来触发onchange事件, 这样没有意义。
------解决方案--------------------
通过js来修改元素的value本身就不会触发onchange事件,可以通过封装来达到类似的效果,onpropertychange可以是说IE特有的奇葩事件,存在浏览器兼容问题而且这个事件本身有很多bug,所以不要用。
- JScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <script type="text/javascript"> function sayValue(){ alert("值:" + document.getElementById('ddlTest').value); } </script> </head> <body> <div style="width:100%;text-align:center;" > <select id="ddlTest" onchange="alert('发生了onchange事件')" onpropertychange="alert('发生了onpropertychange事件')" > <option value="" ><--全部--></option> <option value="1" >湖南</option> <option value="2" >湖北</option> <option value="3" >广东</option> <option value="4" >广西</option> </select> <input id="Button2" type="button" value="改变下拉列表的值为广东" onclick="document.getElementById('ddlTest').value='3'" /> <input id="Button1" type="button" value="选中了:" onclick="sayValue()" /> </div> </body> </html>
以上代码, 在IE是能检测到变化的, 但是在firefox中就不行了。 搜索了半天, firefox也只在文本框中有一个oninput事件, select还是束手无策。 哪位大侠能解此难题?
当然, 不要告诉我用什么setInterval或者js函数改变时来触发onchange事件, 这样没有意义。
------解决方案--------------------
通过js来修改元素的value本身就不会触发onchange事件,可以通过封装来达到类似的效果,onpropertychange可以是说IE特有的奇葩事件,存在浏览器兼容问题而且这个事件本身有很多bug,所以不要用。
- HTML code
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>无标题页</title> </head> <body> <div style="width:100%; text-align:center;" > <select id="ddlTest"> <option value="0" >全部</option> <option value="1" >湖南</option> <option value="2" >湖北</option> <option value="3" >广东</option> <option value="4" >广西</option> </select> <input id="Button2" type="button" value="改变下拉列表的值为广东" /> <input id="Button1" type="button" value="选中了:" /> </div> <script> function $(id) { return document.getElementById(id); } function setValue(elem, value) { elem.value = value; if (elem.fireEvent) { elem.fireEvent("onchange"); } else { var evt = document.createEvent('HTMLEvents'); evt.initEvent('change', true, true); elem.dispatchEvent(evt); } } function sayValue() { alert("值:" + $('ddlTest').value); } $("Button2").onclick = function() { setValue($("ddlTest"), "3"); } $("Button1").onclick = sayValue; $("ddlTest").onchange = function() { alert('发生了onchange事件'); } </script> </body> </html>