CODEWITHSUNDEEP
javascriptjqueryoracle-apexjquery-events
nik
nik

Reputation: 2294

Detect change of option values of an select field using jQuery

Is there a way of event binding to recognize when the options of a select field get changed by some different, external, not editable JavaScript?

Just to clearify: I don't want to listen to value changes, I want to listen to a change of the DOM structure

Upvotes: 1

Views: 1997

Answers (2)

Tom
Tom

Reputation: 7028

Looking for "DOM Changes" is cutting it way too broad. As your comment has pointed out, you are using the cascading LOV parent items functionality on your select list. This turns the select list into a refreshable item which means it will get its set of options again when one of those parent items are changed. This refresh is basically an AJAX call.
Since this is all builtin, you can very simply use the native feature of binding an event handler to the "after refresh" of this item. There is no need to start listening to dom events. "After refresh" is the standard way of dealing with this.

Two options:

  • use a dynamic action which reacts to the "After Refresh" event dynamic action creation with after refresh

  • bind to the "apexafterrefresh" event with an eventlistener or jQuery 

    $("#P1_SELECT_LIST").on("apexafterrefresh", function(){ ... });

From there on you can do anything else you'd like, but this is certainly the way to go.

Upvotes: 1

YaBCK
YaBCK

Reputation: 3029

Have you tried this?

This will only tell you if there is any change to the structure. 

$(".selectBox").bind("DOMSubtreeModified", function() 
{
    $(".message").append("Structure changed<br>");
});


$("#add").click(function() 
{
    $(".selectBox").append("<option>Added</option>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<button id="add">Add to Select</button>


<select class="selectBox">


</select>


<div class="message"></div>

If you was looking for anything like data or attributes. Then you will probably be looking for something like MutationObserver

MutationObserver provides developers a way to react to changes in a DOM. It is designed as a replacement for Mutation Events defined in the DOM3 Events specification.

Upvotes: 3

Related Questions