Get Value of Multi-Select with JavaScript

[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 !

[dgoode]

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.

[Daryl_McC]

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

[dgoode]

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

[Fubar]

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

[JonathanFrometa]

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);

  });

[JonathanFrometa]

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,

[Fubar]

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

[powermareben]

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.

[arjunmusuvathy]

@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