检测html选择框上的程序性更改 [英] Detect programmatical changes on a html select box
问题描述
IE和FF都不会触发onchange '当选择框中的当前选择用javascript修改时。除此之外，js函数会改变选择是框架的一部分，所以我不能改变它来触发一个onchange（），例如在那个末端。
下面是一个例子：
< body>
< p>
< select id =sel1onchange =myfunction（）;>< option value =v1> n1< / option>< / select>
< input type =buttononclick =test（）;值=添加一个选项并选择它。 />
< / p>
< script type =text / javascript>
var inc = 1;
var sel = document.getElementById（'sel1'）;
function test（）{
inc ++;
var o =新选项（'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调用来轮询所需的选项dom元素，并在检测到某些内容已更改时触发自己的回调。
至于你的问题的答案
有没有什么办法可以使test（）调用$ b $ myfunction（）而不改变test（）
（或在按钮上添加事件）？
是的，通过使用jquery AOP http://plugins.jquery.com/project/AOP，它提供了一个简单的解决方案。
< body>
< p>
< select id =sel1onchange =myfunction（）;>< option value =v1> n1< / option>< / select>
< input type =buttononclick =test（）;值=添加一个选项并选择它。 />
< / p>
< script type =text / javascript>
var inc = 1;
var sel = document.getElementById（'sel1'）;
function test（）{
inc ++;
var o =新选项（'n'+ inc，inc）;
sel.options [sel.options.length] = o;
o.selected = true;
sel.selectedIndex = sel.options.length - 1;
}
function myfunction（）{
document.title + ='[CHANGED]';
}
//如果您想要后来调用
，则更改为aop.after jQuery.aop.before（{target：window，method：'test'}，
function（）{
myfunctino（）;
}
）;
< / script>
< / body>
Is there a way to make a HTML select element call a function each time its selection has been changed programmatically?
Both IE and FF won't fire 'onchange' when the current selection in a select box is modified with javascript. Beside, the js function wich changes the selection is part of framework so I can't change it to trigger an onchange() at then end for example.
Here's an example:
<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>
Is there any way to make test() call myfunction() without changing test() (or adding an event on the button)?
Thanks.
If you can extend/modify the framework to give a hook/callback when they change the select options, it would be better (one way could be to use the dynamic capabilities of js to duck type it in?).
Failing that, there is an inefficient solution - polling. You could set up a setTimeout/setInteval call that polls the desired select option dom element, and fire off your own callback when it detects that something has changed.
as for the answer to your question
Is there any way to make test() call myfunction() without changing test() (or adding an event on the button)?
yes, by using jquery AOP http://plugins.jquery.com/project/AOP , it gives an easy-ish solution.
<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>
这篇关于检测html选择框上的程序性更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
