Power page form multi select choice reset through jquery

(1) Share

Report

Posted on by panug

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

Categories:

General topics

I have the same question (0)

All responses (7)

Answers (1)

Lucas001 2,429 Super User 2025 Season 2 on at

Like (0)

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

Was this reply helpful? Yes No
panug 19 on at

Like (0)

Report

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

Was this reply helpful? Yes No
DimitrisThal 41 on at

Like (0)

Report

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

Was this reply helpful? Yes No
panug 19 on at

Like (0)

Report

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

Was this reply helpful? Yes No
DimitrisThal 41 on at

Like (0)

Report

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.

Was this reply helpful? Yes No
Verified answer

Fubar 8,338 Super User 2025 Season 2 on at

Like (2)

Report
@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); } };

Was this reply helpful? Yes No
DimitrisThal 41 on at

Like (0)

Report

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

Was this reply helpful? Yes No