I have a materialize button, with a display effect, it displays two list elements (Spanish, English, the button says languages) when I click, it does not display the effect. On the materialize page, it tells me that I have to add the jquery CDN before it, it still does not work, any help?
For all Materialize components you need to initialize them, as shown in the documentation .
In the case of the Select component, it is:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('select').formSelect();
});
In the case of the DropDown component:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems, options);
});
// Or with jQuery
$('.dropdown-trigger').dropdown();
To me, and apparently to many, even adding the initialization of the component, this did not work as it was shown in the example of the Materialize page.
Within the latest version of Materialize CSS there are a couple of components available (version 1.0.0), which are either available for use, simply do not work, or work in a different way to the one shown in the documentation . Since this latest version is Beta.
In the case of the components Select and DropDown exists in the new version with a small problem, when deploying it does not perform the expected effect, which is shown in the documentation.
For the same reason what I did was to use the old version of Materialize CSS (version 0.100.2) that if well, within it works both the select component and the dropdown , within it there are many components that are quite relevant, such as the DatePicker .