Topic: Select with filter reset

KelsoField priority asked 4 months ago


Expected behavior using setValue() to change the selects option (in this case 0 to effectively reset it) the select visibally changes to the option pushed.

Actual behavior although the value is set to 0, visually it remains on the previous selection

Resources (screenshots, code snippets etc.)

I have two selects, one must reset the other if changed.

// Event listener for the agent select
    agentNumberElement.addEventListener('change', function () {
        if (this.value !== "0") { alert('agent')
            brokerSelect.setValue(0);
            document.getElementById('r2').click();
            document.getElementById('r2i').click();
        }
    });
    // Event listener for the broker select
    brokerNumberElement.addEventListener('change', function () {
        if (this.value !== "0") {alert('broker')
            agentSelect.setValue(0); 
            document.getElementById('r3').click();
            document.getElementById('r3i').click();
        }
    });

the alerts fire so I know the script is detecting the value>0 yet the setValue does not trigger a change

there is no trigger, reset or update method in the API

any help appreciated


Grzegorz Bujański staff answered 4 months ago


I have prepared a snippet for you: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/6205126

If I understand correctly, this is the solution you were looking for.


Toby Bishop free answered 4 months ago


It seems like setValue(0) isn't visually updating the select element; you might need to trigger a change event manually after setting the value.


KelsoField priority answered 4 months ago


thanks, and that does work, but the issue is when applying the data-mdb-filter="true" to the select.In this case, although I can correctly determine if the selected value is not equal to the defined value, but the requested change to the opposing select does not fire.

i appended your snip:

<select id="agentNumberElement" data-mdb-select-init data-mdb-filter="true">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">Eight</option>
</select>

<select id="brokerNumberElement" data-mdb-select-init data-mdb-filter="true">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">Eight</option>
</select>

and as with my version, the function to change the value no longer works.

https://mdbootstrap.com/snippets/standard/kelsofield/6203760


Grzegorz Bujański staff answered 4 months ago


This is the default behavior of select - changing value programmatically does not trigger the change event. See this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/6202634#js-tab-view

But you can use our valueChanged.mdb.select event which will fire after changing the value.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.3.2
  • Device: *all
  • Browser: *all
  • OS: *all
  • Provided sample code: No
  • Provided link: No