在firefox中， 怎么检测select的选择项因js赋值发生了变化
日期：2014-05-16 浏览次数：20369 次
在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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
