I'm using Materialize 1.0 and can not get the select input type to work. Nothing shows below the label. I believe I have the initialize correct as I copy and pasted from their website.
I'm following a tutorial https://www.youtube.com/watch?v=KxdCIbeO4Uk and can't seem to produce the same result as the author Amit Agarwal. He finished the section I'm having issues with at 17:00 min into the tutorial. The select/option input field is not working. He is using Materialize 1.0. I've checked the code at least 10 times for syntax errors and everything works but the select.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">
</script>
<script>
$(document).ready(function () {
$('select').formSelect();
});
function sendEmail(e) {
e.preventDefault();
var data = {
from: $('#from').val(),
to: $('#to').val(),
subject: $('#subject').val(),
body: $('#body').val();
};
alert("You just submitted: " + JSON.stringify(data));
};
</script>
</head>
<body>
</body>
<div class="container">
<div class="row">
<div class="col s12">
<h4 class="light"> Mailman </h4>
</div>
</div>
<form onsubmit="sendEmail(event)">
<div class="row">
<div class="input-field col s12">
<select name="from" id="from">
<option value="email1">email1@g.com</option>
<option value="email2">email2@g.com</option>
</select>
<label for="from"> Sender Email Address</label>
</div>
<div class="input-field col s12">
<input type="email" placeholder="Enter email here" id="to">
<label for="to" Recipient's Email Address></label>
</div>
<div class="input-field col s12">
<input type="text" placeholder="Enter subject" id="subject">
<label for="subject" Subject Line></label>
</div>
<div class="input-field col s12">
<textarea id="body" class="materialize-textarea"></textarea>
<label for="body" Email Body></label>
</div>
</div>
<div class="row">
<div class="col s12">
<button type="submit">Send Email</button> </div>
</div>
</form>
</div>
</html>
I expect to see a dropdown selector.
There are couple of mistakes here in your code First: You have declared container div outside body tag. Second: Remove the semi colon from "body: $('#body').val();" and run the script. It will work.