Geek Answers Handbook

Define software changes in html selection window

Is there a way for an HTML select element to call a function every time its selection has been changed programmatically?

Both IE and FF will not trigger "onchange" when the current selection in the select box is changed using javascript. In addition, the js function, which changes the selection, is part of the framework, so I cannot change it to call, for example, onchange (), for example, at the end.

Here is 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 a way to make test () call myfunction () without changing test () (or adding an event to a button)?

Thanks.

+5
javascript html events html-select
source share
5 answers

If you can expand / modify the framework to give a hook / callback when they change the selections, it would be better (one way could be to use the dynamic capabilities of js for the duck it is in?).

Otherwise, there is an ineffective solution - a survey. You can set up a call to setTimeout / setInteval, which will poll the desired dom option select element and cancel your own callback when it detects that something has changed.

as the answer to your question

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

yes, using jQuery AOP http://plugins.jquery.com/project/AOP , it gives a simple 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>
+4
source share

Define your own change function, which calls the framework function and then calls the callback function.

eg:.

 function change(callback) { frameworkchange(); callback(); }
+1
source share

The answer is no.

The DOM only fires the onchange event as a result of user action, not code. No further events are foreseen in this regard.

You will need to configure the framework or abandon your requirements.

0
source share

Oh...

you can access the onpropertychange event, it contains the property in the event arguments to determine which property has been changed.

It detects the changes of "selectedIndex" and "value" - just a case test "propertyName". I am currently working with the ASP.NET jc framework. Here is the direct copy code:

1) define a handler:

this._selectionChangedHandler = null;

2) assign a handler

this._selectionChangedHandler = Function.createDelegate (this, this._onSelectionChanged);

3) attach a handler to the event

$ addHandler (element, "propertychange", this._selectionChangedHandler);

4) create a function

 _onSelectionChanged: function(ev) { if (ev.rawEvent.propertyName == "selectedIndex") alert('selection changed'); },
0
source share

With jQuery you can do something like

 $(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; }); });

This will lead to the detection of changes programmatically and allow you to respond to each changed element.

0
source share

More articles:


All Articles