Materialize: Element select not working
i can't see select on page components. Please update element select. Thanks for sharing
kamitori
All 12 comments
There is currently no default style for it but try clicking in it anyways. I will work on a default style tonight
acburst
on 28 Nov 2014
Thanks your answer. How to create a select like that? My code:
<select name="" id="selector">
<option value="0" selected disabled>All</option>
<option value="1">abc</option>
<option value="2">def</option>
<option value="3">ghi</option>
<option value="4">jkl</option>
</select>
but it's not working and i don't see anything of select. Please help me one more time.
kamitori
on 28 Nov 2014
Have you imported jquery and materialize.js into your HTML? Are there any console errors?
Dogfalo
on 28 Nov 2014
When import materialize.js to head tag error, import to body no error
kamitori
on 28 Nov 2014
Make sure your HTML looks like this.
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
Checked everything still not working
mayank33
on 8 Jul 2015
There doesn't seem to be any known issues with a simple select not working right now. Please create a new issue with a codepen (http://codepen.io/Dogfalo/pen/xbzPQV) example. Make sure you have initialised the javascript code indicated in http://materializecss.com/forms.html#select .
carlosperate
on 8 Jul 2015
Select works with these files:
<script src="//code.jquery.com/jquery-2.1.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
The select didn't work for me with these files:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
So, I copy-pasted my whole page to codepen and everything magically worked.
I found out that codepen used different versions of the JS-files that what I had included.
You can see it from the Pen Settings:
The problem seems to be with the latest version of jQuery.
vikohone
on 13 Jan 2016
Yes, so don't use jQuery 3.0.0 and 2.2.0.
Tim-arts
on 15 Jan 2016
with jquery 2.1.4 and this:
$(document).ready(function() {
$('select').material_select();
});
select work fine
RealTekOne
on 22 Jan 2016
@RealTekOne Thanks, it tooks me a long time to figure out why it was not working...
schankam
on 1 Feb 2016
Hi try it
works with me
use materialize.css 1.0.0-beta
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var options = document.querySelectorAll('option');
var instances = M.FormSelect.init(elems, options);
});
artodeschini
on 4 May 2018
Related issues
heshamelmasry77
路
3Comments
ruslandzhumaev
路
3Comments
MickaelH974
路
3Comments
acierpinski
路
3Comments
SoproniOli713
路
3Comments
Most helpful comment
Hi try it
works with me
use materialize.css 1.0.0-beta
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var options = document.querySelectorAll('option');
var instances = M.FormSelect.init(elems, options);
});