Question

有没有办法让HTML select元素在每次以编程方式更改其选择时调用函数？

当使用javascript修改选择框中的当前选择时，IE和FF都不会触发'onchange'。此外，js函数更改选择是框架的一部分，所以我无法更改它以触发onchange（），例如。

以下是一个例子：

<body>
<p>
<select id="sel1" onchange="myfunction();"><option value="v1">n1</option></select>
<input type="button" onclick="test();" value="Add an option and select it." />
</p>
<script type="text/javascript">
    var inc = 1;
    var sel = document.getElementById('sel1');
    function test() {
        inc++;
        var o = new Option('n'+inc, inc);
        sel.options[sel.options.length] = o;
        o.selected = true;
        sel.selectedIndex =  sel.options.length - 1;
    }

    function myfunction() {
        document.title += '[CHANGED]';
    }
</script>
</body>

有没有办法让test（）调用myfunction（）而不更改test（）（或在按钮上添加事件）？

感谢。

Answer 1

如果您可以扩展/修改框架以在更改选择选项时提供钩子/回调，那么它会更好（一种方法是使用js的动态功能来对其进行输入？）。

如果做不到这一点，就会出现效率低下的问题 - 民意调查。您可以设置一个setTimeout / setInteval调用来轮询所需的select选项dom元素，并在检测到某些内容发生更改时触发您自己的回调。

关于你问题的答案

有没有办法进行test（）调用 myfunction（）没有改变测试（）（或在按钮上添加事件）？

是的，通过使用jquery AOP http://plugins.jquery.com/project/AOP，它提供了一个简单的解决方案。

<body>
<p>
<select id="sel1" onchange="myfunction();"><option value="v1">n1</option></select>
<input type="button" onclick="test();" value="Add an option and select it." />
</p>
<script type="text/javascript">
    var inc = 1;
    var sel = document.getElementById('sel1');
    function test() {
        inc++;
        var o = new Option('n'+inc, inc);
        sel.options[sel.options.length] = o;
        o.selected = true;
        sel.selectedIndex =  sel.options.length - 1;
    }

    function myfunction() {
        document.title += '[CHANGED]';
    }

    //change to aop.after if you want to call afterwards       
      jQuery.aop.before( {target: window, method: 'test'}, 
        function() { 
          myfunctino(); 
        }
      );
</script>
</body>

Answer 2

定义您自己的更改函数，该函数调用框架函数然后调用回调函数。

e.g：

function change(callback)
{
    frameworkchange();
    callback();
}

Answer 3

答案是......不。

DOM仅在用户操作而不是代码的情况下触发onchange事件。在这方面，它没有提供任何其他事件。

您需要自定义框架或删除您的要求。

Answer 4

咳咳......

您可以访问事件'onpropertychange'，它包含事件参数中的属性，以标识更改了哪个属性。

它检测到'selectedIndex'和'value'更改 - 只是案例测试'propertyName'我正在使用ASP.NET js框架这里是一些直接的复制粘贴代码：

1）定义处理程序：

this._selectionChangedHandler = null;

2）分配处理程序

this._selectionChangedHandler = Function.createDelegate（this，this._onSelectionChanged）;

3）将处理程序附加到事件

$ addHandler（element，“propertychange”，this._selectionChangedHandler）;

4）创建功能

_onSelectionChanged: function(ev) {

if (ev.rawEvent.propertyName == "selectedIndex")
        alert('selection changed');
},

Answer 5

使用JQuery，您可以执行类似

的操作

$(document).ready(function(){ 

          $('#select-id').change(function(e){
               e.preventDefault();
               //get the value of the option selected using 'this'
               var option_val = $(this).val();

                  if(option_val == "v1"){
                       //run your function here
                  }
                return true; 
            });
   });

这将以编程方式检测更改并让您回复每个更改的项目

检测html选择框上的程序更改

5 个答案: