Get Value of Multi-Select with JavaScript

(0) Share

Report

Posted on by Daryl_McC

Hi Everyone,

I am trying to hide some fields on a portal form based on an option selected on a multiple choice column.

I'm having trouble getting the selected value of the multiple choice column.

Here's my code:

 $(document).ready(function () {
 var referredBy = $("#new_referredby").change(function () { FieldChanged(); });
 });
FieldChanged = function () {
 console.log("Hit Change" + referredBy);}

This code works when I have a field that is a text field but doesn't when it's a multi- select.

If anyone has any suggestions on how to get the value of the multiselect please let me know.

Thanks !

Categories:

General topics

I have the same question (0)

All responses (13)

Answers (0)

dgoode on at

Like (0)

Report
Hi Daryl, you can leverage the .change() function. Below is the documentation for more detailed reference.
https://api.jquery.com/change/

I'm also including an example scenario with code sample and screenshots below.

In this scenario I needed to hide the divs based on 3 different picklist value scenarios. You can leverage a switch statement or an if statement.

/*****Hide Divs based on Optionset Value *********/ /* Wood Type = Null, Hide Softwood and Hardwood options Wood Type = Softwood, Hide Hardwood Options Wood Type = Hardwood, Hide Softwood Options */ $(document).ready(function() { $("#dwg_woodtype").change(onStatusChange); $("#dwg_woodtype").change(); }); function onStatusChange(){ //Wood Type Logic if ($('#dwg_woodtype').val() === "") { $('#dwg_softwood,#dwg_softwood_label').hide(); $('#dwg_hardwood,#dwg_hardwood_label').hide(); }else if($('#dwg_woodtype').val() == "123840000") { $('#dwg_softwood,#dwg_softwood_label').show(); $('#dwg_hardwood,#dwg_hardwood_label').hide(); }else($('#dwg_woodtype').val() == "123840001") { $('#dwg_softwood,#dwg_softwood_label').hide(); $('#dwg_hardwood,#dwg_hardwood_label').show(); } }

Hope this helps.

Was this reply helpful? Yes No
Daryl_McC 2 on at

Like (0)

Report
Hi @dgoode ,

thanks for taking the time to look at this.

While I believe the above would work with a standard option set with a single selection, this doesn't work with a multi select option set.

Here's the code I used based on your example:
console.log("Loaded latest"); $(document).ready(function() { $("#new_referredby").change(onStatusChange); $("#new_referredby").change(); }); function onStatusChange(){ //Wood Type Logic if ($('#new_referredby').val() === "") { $('#new_referredbytextvalue,#new_referredbytextvalue_label').hide(); console.log("hit empty"); }else if($('#new_referredby').val() == "518820011") { $('#new_referredbytextvalue,#new_referredbytextvalue_label').show(); console.log("hit other value"); } }

I think we might need to loop through the values?

Any advise is appreciated!

Kind Regards,
Daryl

Was this reply helpful? Yes No
dgoode on at

Like (0)

Report

Ah, sorry. I missed that you were using multi select choices.
Take a look at this documentation:
docs.microsoft.com/en-us/power-apps/maker/portals/configure/choices-column

You will have to loop through the values for sure. When I get down time later this week I'll work on doing this, but if you get it working beforehand please post in the reply. This will be useful for others as this will be a common code pattern needed by others.
Best Regards,
-Donovan

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

Like (1)

Report
There is probably an easier way to to do this e.g. using JQuery's .each()
below I am just showing how to get it into a JavaScript array that you can then loop to get the values.

The selected values are held in JSON in the value attribute of the field input tag

// To get into a JavaScript array var myTestArray = JSON.parse($("#fieldname").attr("value")); // If there are currently selected itsms they will be in myTestArray[0].Value, myTestArray[1].Value etc etc

Was this reply helpful? Yes No
JonathanFrometa 8 on at

Like (0)

Report

Hi Fubar, your answer is good, however could show how to call the on change event of the multiselect filed first?
The basic on change event function does not work for me, meaning never get called, this is what I have:
$('#multiselectfieldname').change(function(){
var myTestArray = JSON.parse($("#multiselectfieldname").attr("value"));
alert(myTestArray[0].Value);
});

Was this reply helpful? Yes No
JonathanFrometa 8 on at

Like (0)

Report

Hi Daryl_McC, did you have this solution, can you share the solution capturing the on change event of a multiselect field and getting the selected values?

Thank you,

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

Like (0)

Report
Not sure if there is another way or not, but can be done with Mutation observer
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
powermareben 10 on at

Like (0)

Report
Here is a working code using Mutation observer:

var referedByMultiSelect = document.getElementById('new_referredby'); var observer = new MutationObserver(function(mutations) { var referredbyarray = $("#new_referredby").val(); var fieldtohide = false; if (referredbyarray != "") { var referedByJSON = JSON.parse(referredbyarray); for (i = 0; i < referedByJSON.length; i++) { if (referedByJSON[i].Value == "123080002") fieldtohide = true; } } if (fieldtohide == true) { $("#id_of_control_to_hide").val(""); $("#id_of_control_to_hide,id_of_control_label_to_hide").hide(); $("#id_of_control_to_hide").closest("td").find("div.control, div.info").hide(); $("#id_of_control_to_hide").closest("tr").toggle(false); } else { $("#id_of_control_to_hide,id_of_control_label_to_hide").show(); $("#id_of_control_to_hide").closest("td").find("div.control, div.info").show(); $("#id_of_control_to_hide").closest("tr").toggle(true); } }); observer.observe(referedByMultiSelect, { attributes: true, attributeFilter: ['value'] });

In the provided code snippet, 'new_referredby' represents the id of a multi-select control. In Dataverse this is commonly referred to as the logical name. When inspecting this control using developer tools, it appears as 'new_referredby_ledit', however, the actual logical name is referenced in a hidden tag.
Make sure to use the values assigned to each multi-select option not the label names.
For instance, if the multi-select options are "Red," "Green," and "Blue," with corresponding values "123080000," "123080001," and "123080002" respectively, and the intention is to hide a field when "Green" or "Blue" is selected, the conditional statement should resemble:
if (referedByJSON[i].Value == "123080001" || referedByJSON[i].Value == "123080002")

Furthermore, when you hide your field make sure both the control and the label are hidden. Additionally, hide the closet tr and td elements to prevent leaving empty space in the layout.

Was this reply helpful? Yes No
arjunmusuvathy 184 on at

Like (0)

Report

@powermareben This is brilliant, it works for me. Many thanks for sorting the complex thing out.

I just was going around blogs to find this in short time. Just a question, I have put this function on load of the page and it does trigger on each field's on change is it? As I had an alert in the 1st line and it was showing up when I checked other fields as well (like say another standard optionset).

Only thing I found in your code that needs editing is this bit

Current line of code:
observer.observe(disclosureMultiSelect, {

Update needed:
observer.observe(referedByMultiSelect, {

Thanks
Arjun

Was this reply helpful? Yes No
powermareben 10 on at

Like (0)

Report

@arjunmusuvathyThe observer function observes changes for the specified multi-select field, in this case referredByMultiSelect. You asked, "Does the function trigger on each field's onchange?"...it doesn't trigger for each field's onchange; it only triggers for the control you wanted to observe (i.e.,in this case -> var referredByMultiSelect = document.getElementById('new_referredby');).
If you have other multiselect fields, you'll need to add observer functions for each field.

In my case, I have a multistep Power Pages Form, so I added the JS in the Custom JavaScript section located at the bottom of the 'Form Options' tab. If you have a basic form, you would add the JS in the Custom JavaScript section found at the bottom of the 'Additional Settings' tab.

I updated the variable name to 'referedByMultiSelect'. Thank you for pointing that out. I attempted to replace all the variable names to match the ones used in this thread, and it seems I missed one.

Was this reply helpful? Yes No