Topic: Cannot change selected value in Material Select programmatically
I'm actually converting default dropdown selectors to use the material design dropdowns. Unfortunately, I need to programmatically change the value of the dropdown, but it doesn't work.
For the example, I will use a <select> with id dropdown-select, class mdb-select and 2 possible values (none and all ; default is none):
$(".mdb-select").materialSelect(); // I initialize all the selectors of my page
$("#dropdown-select").val("all"); // Changes value from 'none' to 'all'
console.log($("#dropdown-select").val()); // Prints 'none' instead of 'all'
Here is the complete example: https://mdbootstrap.com/snippets/jquery/originalsbytoto/1179457
I tried to change the value before initializing the select, but it doesn't work.
Is there a way to change the value of a dropdown using JS ?
Thank you in advance
Hi OriginalsThomas,
You are correct. Our initialization of material select generates new structure on your page to create this material design behaviour. To check what is that structure you can simply inspect your page and see how this structure behaves. I have example snippet for you to show how you can modify the value of your MDB material selects.
Check this out: https://mdbootstrap.com/snippets/jquery/pjoter-2-0/1183915
If you need additional help I am here for you.
Best Regards, Piotr
Thank you for your answer.
I looked into the structure and your snipped, and I discovered that it works when there is no selected and enabled option (in your example, the default selected option is also disabled).
I just show something really strange: in my snipped, the value displayed in the page is updated, but this is not the case in yours (and my real page which is at 90% the same as in my snipped)
How is that possible?
MDBootstrap staff pro premium priority commented 5 years ago
This component behaviour keeps on surprising. I will investigate why this is even possible. We will take this to consider in our next code review. It will be definitely fixed. Can I help you with your development in any other way right now?
MDBootstrap staff pro premium priority commented 5 years ago
I fixed my snippet to work properly. This is not the prettiest code but it works: https://mdbootstrap.com/snippets/jquery/pjoter-2-0/1183915
OriginalsThomas pro commented 5 years ago
Thank you again for this.I looked and I will try this method for the select and I will be using the code review when possible. About solving the issue, what can I do to help you?
MDBootstrap staff pro premium priority commented 5 years ago
Thank you for offering your help but we have internal procedures about reviewing the code of components. We are on it. The results should be implemented next month. Have a good day!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.9
- Device: Desktop
- Browser: Chrome 76
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes