在firefox中， 如何检测select的选择项因js赋值发生了变化


<!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事件， 这样没有意义。

解决方案 »

  1.   

    <select id="ddlTest" onchange="alert('发生了onchange事件')" >这个事件在firefox 12.0下正常发生呀。可能是你的文件编码问题。
      

  2.   


    请注意条件：1. 在firefox下; 2.点击"改变下拉列表的值为广东"这个按钮; 
    要手动点select触发事件， 就不需要到里来发贴了。
      

  3.   

    在firefox中， 如何检测select的选择项因js赋值发生了变化
      

  4.   

    既然是用 JavaScript 赋值，那就在赋完值后把要做的事情写上去就不行了？
      

  5.   

    可以是可以， 但我这个地方是希望做成插件公用。 如果每个地方都要象这样， 那我的插件用到的地方， 每一处都得同时多写一个事件。 明白了吗？难道： firefox 就这么差劲， 没有提供一种解决方案?
      

  6.   

    onpropertychange这个事件ff不支持 要用input替代
      

  7.   


    兄弟，　input只是firefox的文本框的事件，　select不支持
      

  8.   

    click 事件，调用一下onchange事件的函数
      

  9.   

    通过js来修改元素的value本身就不会触发onchange事件，可以通过封装来达到类似的效果，onpropertychange可以是说IE特有的奇葩事件，存在浏览器兼容问题而且这个事件本身有很多bug，所以不要用。<!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>