Uncaught TypeError: $(...).selectBox is not a function

I'm using the code below to select options from drop down, but I'm getting:

Uncaught TypeError: $(...).selectBox is not a function.

in console. I'm going to use jquery-selectBox.

My code:

<script>
    $(document).ready(function() {
        $("SELECT").selectBox();
        $("SELECT").selectBox('settings', {
            'menuTransition': 'fade',
            'menuSpeed': 'fast'
        });
    });
</script>

and in the body tag I get a select field:

<select class="selectBox">
    <option value="0">Login Type</option>
    <option value="1">Admin</option>
    <option value="2">Customer</option>
</select>

I included all JavaScript sources in my code, but still it's giving me the error. Any solution?

In order to use jQuery selectBox, just load it properly on your page (e.g. via CDN).

$(document).ready(function() {
  $("select").selectBox();
  $("select").selectBox('settings', {
    'menuTransition': 'fade',
    'menuSpeed': 'fast'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectbox/1.2.0/jquery.selectBox.js"></script>

<select class="selectBox">
  <option value="0">Login Type</option>
  <option value="1">Admin</option>
  <option value="2">Customer</option>
</select>

Note

To use your markup more efficiently, in this case, use your element's class attribute and its value selectBox to select it using jQuery, e.g.:

Your markup:

<select class="selectBox">

Select it via:

$(".selectBox").selectBox();