Topic: Mulitselect not clearing via Javascript, when page rendered with a "selected" value

veritas priority asked 10 months ago


Expected behavior

mdb.Select.getInstance(document.querySelector('#fldSearchFilterP1')).setValue([]);

should clear the select list.

Actual behavior

select list is not cleared

Resources (screenshots, code snippets etc.)

The clearing of the list does not work under this situation: a) the base HTML page is rendered with the appropriate HTML

  <select id="fldSearchFilterP1" multiple class="select" data-mdb-filter="true" name="p1">
    <option value="v1">Value 1</option>
    <option value="v2">Value 2</option>
    <option value="v3" selected="selected">Value 3</option>
    <option value="v4">Value 4</option>
  </select>

b) note the "Selected" value c) I need to programmatically clear the list, thus the use of setValue([]).

What I found is: 1) The value doesn't clear 2) If I "click" on any of the check box post page render and then setValue([]), the newly selected value clear, but not the original 3) I have also tried to "dispose" of the instance, clear the select via JQuery (confirmed in the dom) and then re-create it with new mdb.Select(id), upon re-creation "Value 2 " is still selected.

Note: this is strictly cosmetic. When I submit the form, "v2" is NOT submitted (as expected), the value is NOT set at the dom layer.

Any suggestions would be greatly appreciated.


Grzegorz Bujański staff commented 9 months ago

Try this: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5925350#js-tab-view


veritas priority commented 9 months ago

Thanks - initial rounds of testing seems to show that it is working as expected.

I tried the same (and variances of the same concept), abet with jQuery, without much luck. So thanks for a working sample.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.1
  • Device: laptop
  • Browser: chrome/firefox
  • OS: windows
  • Provided sample code: No
  • Provided link: No