cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Daryl_McC
New Member

Get Value of Multi-Select with JavaScript

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 !

 

7 REPLIES 7
dgoode
MPP
MPP

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

dgoode_3-1654711209443.png

 

dgoode_0-1654711063483.pngdgoode_1-1654711071054.pngdgoode_2-1654711078260.png

 

Hope this helps.

Daryl_McC
New Member

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

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
Solution Sage
Solution Sage

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

 

 

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
Frequent Visitor

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
Solution Sage
Solution Sage

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

 

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Users online (2,860)