Skip to main content

Notifications

Community site session details

Community site session details

Session Id :
Power Pages - General Discussions
Answered

Power page form multi select choice reset through jquery

(1) ShareShare
ReportReport
Posted on by 19

Hi,
I have requirement to reset multi select choice control to default when there is change in radio button value.

I need to achieve this through jquery.

Please help.

 

HTML source code i see for this control is not regular html "Select, options" control. Its something like below and more than below 

<div class="msos-selecteditems-container" tabindex="0" title="Event1"><ul class="msos-selecteditems msos-current-selection-normal" tabindex="-1" aria-label="engagementevent" aria-activedescendant="engagementevent-selected-item-2"><li class="msos-selected-display-item msos-visible msos-selecteditem-active" name="engagementevent-selected-item-2" aria-describedby="engagementevent_selecteditems_instructions" id="engagementevent-selected-item-2" tabindex="-1" title="" data-value="490600046" aria-label="Engagement Event"><span class="msos-selected-display-item-text">Event1</span><button class="msos-quick-delete" tabindex="-1" name="engagementevent-selected-item-delete-2" aria-label="Remove Event1"><span class="msos-glyph"></span></button></li></ul><div class="msos-selecteditems-toggle-container"><button class="msos-selecteditems-toggle msos-invisible" tabindex="-1" aria-hidden="true" type="button">+{0}</button></div></div>

Thank you

  • DimitrisThal Profile Picture
    41 on at
    Re: Power page form multi select choice reset through jquery

    @Fubar amazing that did it! Thanks a lot man!

  • Verified answer
    Fubar Profile Picture
    7,955 Super User 2025 Season 1 on at
    Re: Power page form multi select choice reset through jquery

    @DimitrisThal the following function will clear multiselect choices field, it is copied from this page by @OliverRodrigues  https://powerusers.microsoft.com/t5/Front-end-Code-Samples/Manipulating-Choices-Multiselect-OptionSet-via-JavaScript/td-p/1862803

     

     

    function ClearChoicesValues(fieldName){
     var choicesField = $("#" + fieldName + "_Container");
     var checkboxDataItem = choicesField.find("li>>input.msos-checkbox");
     if (!!checkboxDataItem) {
     checkboxDataItem.trigger('change', false);
     }
    };

     

     

  • DimitrisThal Profile Picture
    41 on at
    Re: Power page form multi select choice reset through jquery

    hey @panug thanks for the prompt reply. I've checked that yes but to be honest this doesn't handle any resetting of the multi-select field itself unless I'm missing something?

    My requirement is basically to reset the multi-select to no values selected on a change of another field. Of course multi-select is not supported yet in terms of basic form metadata and I've tried multiple options with Jquery but to no avail.

  • panug Profile Picture
    19 on at
    Re: Power page form multi select choice reset through jquery

    @DimitrisThal here is the another handle on this issue. I posted my comments in Re: How to trigger on change event on MultiSelect ... - Power Platform Community (microsoft.com)

  • DimitrisThal Profile Picture
    41 on at
    Re: Power page form multi select choice reset through jquery

    @panug have you found any solution to this please? Whatever I tried in terms of Jquery doesn't work. Of course multi-select is not yet supported in basic form metadata either.

  • panug Profile Picture
    19 on at
    Re: Power page form multi select choice reset through jquery

    Thank you @Lucas001  but source code does not have any options tag in it.
    As i mentioned in above ,powerpage source code has "unordered list" rather "select" (through pcf script i believe)

    Thank you

  • Lucas001 Profile Picture
    2,174 Super User 2025 Season 1 on at
    Re: Power page form multi select choice reset through jquery

    Hi @panug,

     

    use the radio button onChange event. if that button changes you can check if needed which selected item is chosen and after that run the code below adjusted to your choices etc:

     

     

    $("#id option").prop("selected", function () {
     return this.defaultSelected;
    });

     



    --------------------------------------------------------------------------------------

    Hope that helps.

    If the post solves your problem, please mark it as solution. If it helps, consider a thumbs up.

     

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

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 >