6

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

使用 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() （或在按钮上添加事件）？

谢谢。

4

5 回答 5

4

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

如果做不到这一点，就会有一个低效的解决方案——轮询。您可以设置一个 setTimeout/setInteval 调用来轮询所需的选择选项 dom 元素，并在检测到某些内容发生更改时触发您自己的回调。

至于你的问题的答案

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

是的，通过使用 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>
于 2009-08-02T14:48:52.110 回答
1

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

例如：

function change(callback)
{
    frameworkchange();
    callback();
}
于 2011-05-01T15:00:51.770 回答
0

答案是不。

DOM 仅作为用户操作而不是代码的结果触发 onchange 事件。在这方面，它没有提供任何额外的事件来挂钩。

您将需要自定义框架或放弃您的要求。

于 2009-08-02T14:54:06.327 回答
0

咳咳……

您可以访问事件“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');
},
于 2009-09-07T22:14:05.803 回答
0

使用 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; 
            });
   });

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

于 2014-03-20T05:21:49.183 回答