Unanswered

How to trigger on change event on MultiSelect Option Set in PowerApps Portals using Javascript

(2) Share

Report

Posted on by Jyo17

Hello All,

I am trying to hide/show fields based on selected option in MultiSelect optionset but I am unable to trigger onchange event when an option is selected. I am using Advanced Forms in Power Apps portals.

 $(document).ready(function () {
 $("#new_referredby").change(function () { alert("success"); });
 });

Categories:

General topics

I have the same question (0)

All responses (11)

Answers (0)

ragavanrajan 7,044 Most Valuable Professional on at

Like (1)

Report
Hi @Jyo17

Try this

$(document).ready(function() { $("#new_referredby").on('change', function() { console.log(555, "Test"); }); });

Hope it helps.
------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

Was this reply helpful? Yes No
Jyo17 6 on at

Like (0)

Report

Hello Ragavanrajan,

Thank you for your reply. I have tried it already but it didn't work.

Was this reply helpful? Yes No
abm abm 32,865 Most Valuable Professional on at

Like (0)

Report

Hi @Jyo17

Try the below

$(document).ready(function () {
document.getElementById("new_referredby").addEventListener("change", referredbyFunction);

function referredbyFunction() {
var x = document.getElementById("new_referredby");
alert("success");
}
}

Was this reply helpful? Yes No
kerridge252 31 on at

Like (1)

Report

I got this working by keeping track of the "container" html element title attribute. And then adding an on change to that html element as well.

original code:

theOldText = $(".msos-selecteditems-container").attr('title');

$(".msos-selecteditems-container").on('DOMSubtreeModified', function(e) {
    var theText = $(".msos-selecteditems-container").attr('title');
    if(theText !== theOldText){
        console.log(theText);
        theOldText = $(".msos-selecteditems-container").attr('title');
    }
});

guessing yours's will be:
theOldText = $(".new_referredby-container").attr('title');

$(".new_referredby-container").on('DOMSubtreeModified', function(e) {
    var theText = $(".new_referredby-container").attr('title');
    if(theText !== theOldText){
        console.log(theText);
        theOldText = $(".new_referredby-container").attr('title');
    }
});

Was this reply helpful? Yes No
Fubar 8,338 Super User 2025 Season 2 on at

Like (1)

Report
You can do it with a mutation observer, when a value is selected/deselected in the multi-select the value attribute gets updated.
var foo = document.getElementById('fieldname'); var observer = new MutationObserver(function(mutations) { console.log('changed'); }); observer.observe(foo, { attributes: true, attributeFilter: ['value'] });

Was this reply helpful? Yes No
pankajErrolla1 2 on at

Like (0)

Report

Team I have tried the above piece of code to fire JavaScript on change of option value in my multiselectoptionset. Can you please confirm if the above js is working fine or not ? I would be really helpful if you can share the mutation observer full code.

Also @kerridge252 i have tried your code too but no luck..

Was this reply helpful? Yes No
panug 19 on at

Like (0)

Report

@pankajErrolla1
Try below sample. This worked for me.
Find element id similar to " *_ledit".

$(document).ready(function(){
// Function to handle the mutation event
function handleMutation(mutationsList) {
mutationsList.forEach(function(mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'aria-label') {
// The 'type' attribute of the input element has changed
alert('Input type attribute has changed to: ' + mutation.target.getAttribute('aria-label'));
}
});
}

// Create a MutationObserver
var observer = new MutationObserver(handleMutation);

// Define the target node (the input element)
var targetNode = document.getElementById('country_ledit');

// Configure the observer to watch for attribute changes
var config = { attributes: true, attributeFilter: ['aria-label'] };

// Start observing the target node for mutations
observer.observe(targetNode, config);

});

Was this reply helpful? Yes No
PriyankaKambleB 9 on at

Like (1)

Report

This has helped for me. Further to elaborate this function, i am hiding bit_other field based on my multiselect option set field bit_services. Here is the detailed code:
if (window.jQuery) {
(function ($) {
$(document).ready(function () {
$("#bit_other").closest("td").find("div.control, div.info").hide();

var foo = document.getElementById('bit_services'); // specify multiselect option set field
var observer = new MutationObserver(function (mutations) {
var services = $("#bit_services").val(); // specify multiselect option set field
var showOther = false; // declaring boolean
if (services != "") { //if your multiselect option has at least 1 value selected
var servicesJSONObj = JSON.parse(services); //parse multiselect value in json format
for (i = 0; i < servicesJSONObj.length; i++) {
alert(servicesJSONObj[i].Value);
if (servicesJSONObj[i].Value == "757730009") //if specific value is selected in multiselect field
showOther = true; //then show the field
}
} else
showOther = false;
if (showOther == true) {
$("#bit_other").closest("td").find("div.control, div.info").show(); //show other field
} else {
$("#bit_other").val("");
$("#bit_other").closest("td").find("div.control, div.info").hide(); //hide other field
}
});
observer.observe(foo, {
attributes: true,
attributeFilter: ['value']
});
});
}(window.jQuery));
}

Was this reply helpful? Yes No
PriyankaKambleB 9 on at

Like (1)

Report

if (window.jQuery) {
(function ($) {
$(document).ready(function () {
$("#bit_other").closest("td").find("div.control, div.info").hide();

var foo = document.getElementById('bit_services'); // specify multiselect option set field
var observer = new MutationObserver(function (mutations) {
var services = $("#bit_services").val(); // specify multiselect option set field
var showOther = false; // declaring boolean
if (services != "") { //if your multiselect option has at least 1 value selected
var servicesJSONObj = JSON.parse(services); //parse multiselect value in json format
for (i = 0; i < servicesJSONObj.length; i++) {
alert(servicesJSONObj[i].Value);
if (servicesJSONObj[i].Value == "757730009") //if specific value is selected in multiselect field
showOther = true; //then show the field
}
} else
showOther = false;
if (showOther == true) {
$("#bit_other").closest("td").find("div.control, div.info").show(); //show other field
} else {
$("#bit_other").val("");
$("#bit_other").closest("td").find("div.control, div.info").hide(); //hide other field
}
});
observer.observe(foo, {
attributes: true,
attributeFilter: ['value']
});
});
}(window.jQuery));
}

this is working for me

Was this reply helpful? Yes No
FU Microsoft 112 on at

Like (0)

Report

Your script works except when the last remaining selected item is removed, then the event is not trapped.

Was this reply helpful? Yes No