Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
Check out the New Agent Creator Community
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages - General Discussions / Get Value of Multi-Sel...
Power Pages - General Discussions
Unanswered

Get Value of Multi-Select with JavaScript

(0) ShareShare
ReportReport
Posted on by Daryl_McC 2

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
  • arjunmusuvathy Profile Picture
    arjunmusuvathy 184 on at
    Re: Get Value of Multi-Select with JavaScript

    @powermareben  It is working now as expected. Thank you

  • powermareben Profile Picture
    powermareben 10 on at
    Re: Get Value of Multi-Select with JavaScript

    @arjunmusuvathy as long as you called the observer passing the element you wanted to observe
    i.e. 

    observer.observe(referedByMultiSelect, ...

    , it shouldn't be called multiple times. Did you test this by adding a console.log or alert? If you share your code I can troubleshoot further.

     

  • arjunmusuvathy Profile Picture
    arjunmusuvathy 184 on at
    Re: Get Value of Multi-Select with JavaScript

    @powermareben When I tested this in detail yesterday, I did find that the code is called multiple times even when other fields are changed (not just when multiselectoptionset is changed). Do you why and how do we stop this please?

  • powermareben Profile Picture
    powermareben 10 on at
    Re: Get Value of Multi-Select with JavaScript

    @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.

  • arjunmusuvathy Profile Picture
    arjunmusuvathy 184 on at
    Re: Get Value of Multi-Select with JavaScript

    @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

  • powermareben Profile Picture
    powermareben 10 on at
    Re: Get Value of Multi-Select with JavaScript

    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.
  • Fubar Profile Picture
    Fubar 7,960 Super User 2025 Season 1 on at
    Re: Get Value of Multi-Select with JavaScript

    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'] });

     

  • JonathanFrometa Profile Picture
    JonathanFrometa 8 on at
    Re: Get Value of Multi-Select with JavaScript

    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,

  • JonathanFrometa Profile Picture
    JonathanFrometa 8 on at
    Re: Get Value of Multi-Select with JavaScript

    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);
      });
  • Fubar Profile Picture
    Fubar 7,960 Super User 2025 Season 1 on at
    Re: Get Value of Multi-Select with JavaScript

    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

     

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
Check out the New Agent Creator Community

Quick Links

Michael Gernaey – Community Spotlight

We are honored to recognize Michael Gernaey as our June 2025 Community…

Congratulations to the May Top 10 Community Leaders!

These are the community rock stars!

Announcing the Engage with the Community forum!

This forum is your space to connect, share, and grow!

Leaderboard >

Last month Overall leaderboard

Featured topics

Solution to LinkedIn Authentication in Power Apps Portals

Product updates

Microsoft Power Platform Community release plans