selectWatch.js

jQuery plug-in gives an opportunity to monitor changes of DOM element's CSS styles, attributes, properties, input element or select element. It also gives a call-back when there is a change in the monitored styles or attributes. You will be notified if there is any change of CSS properties attribute or property names monitoring on the screen. With function delegate, which gets an object with names and current values, it will be shown the cause of changes.

Usage

To use the plugin add a reference to jQuery and a reference to this plugin to your page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="selectWatch.min.js"></script>

<input id="myWatch" />

Make sure to include selectWatch.js script file after jquery.js

function callBack(oldValue, newValue, currentElement) {
            alert("Old: " + oldValue + " New: " + newValue);
            console.log(currentElement);
        }
var settings = {
            watchType: "input",
            timeOut: 1000
        };
$("#myWatch").selectWatch(callBack, settings);

Options

selectWatch plugin comes with options to configure how it works. All options below are optional. Default values are presented below.

Example:

var options = {
            watchType: "attr",
            attr: "myAttribute",
            ......
        };

watchType: <string> (required) | Options: element,attr,prop,input,select
timeOut: <int> (Optimal) | Default:100 |
attr: <string> (If you are attr using watchType) | Your custom Attribute name
prop: <string> (If you are prop using watchType) | Your element's css Style name is...

Method

selectRemove(): A method to remove an Element,CSS Style, Attribute, Input or Select monitoring.
Example: $("#myWatch").selectRemove();