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

2019-05-22 13:21:05 阅读：235 来源： 互联网

标签：javascript events html-select html

有没有办法让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()(或在按钮上添加事件)？

谢谢.

解决方法:

如果您可以扩展/修改框架以在更改选择选项时提供钩子/回调,那么它会更好(一种方法是使用js的动态功能来将其输入？).

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

至于你的问题的答案

Is there any way to make test() call
myfunction() without changing test()
(or adding an event on the button)?

是的,通过使用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>

标签：javascript,events,html-select,html
来源： https://codeday.me/bug/20190522/1151731.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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