Topic: Select with filter reset
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
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.
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.
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
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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