You’re offline. This is a read only version of the page.
6
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.
Share
Report $(document).ready(function () {
$("#new_referredby").change(function () { alert("success"); });
});
@PriyankaKambleB -- Thank you so much! This worked for me as well. It was driving me nuts.
Your script works except when the last remaining selected item is removed, then the event is not trapped.
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
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));
}
@pankajErrolla1
Try below sample. This worked for me.
Find element id similar to " *_ledit".
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..
You can do it with a mutation observer, when a value is selected/deselected in the multi-select the value attribute gets updated.
All responses (
Answers (
var foo = document.getElementById('fieldname');
var observer = new MutationObserver(function(mutations) {
console.log('changed');
});
observer.observe(foo, {
attributes: true,
attributeFilter: ['value'] });
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');
}
});
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");
}
}
#1
Fubar
69
Super User 2025 Season 1
#2
oliver.rodrigues
49
Most Valuable Professional
#3
Jon Unzueta
43
