Select with filter reset

Topic: Select with filter reset

KelsoField pro premium priority asked 5 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

Add comment

Grzegorz Bujański staff answered 5 months ago

0 0 Best answer

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.

Add comment

KelsoField pro premium priority answered 5 months ago

0 0 Best answer

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

Add comment

Toby Bishop answered 5 months ago