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