MDB Select

HTML

<link rel="stylesheet" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/css/mdb3/bootstrap.min.css">
<link rel="stylesheet" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/css/mdb3/mdb.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/css/mdb3/style.min.css">
<script src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/js/mdb3/jquery.min.js"></script>
<script src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/js//mdb3/bootstrap.min.js"></script>
<script src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/js/mdb3/mdb.min.js"></script>
The select box does not have caret.
<div class="row">
  <div class="col-xs-5">
    <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>
</div>

JavaScript

$(document).ready(function() {
  $('select').material_select();
  $('select').on('click', () => alert("doot"));
});