Select 2: Creating a searchable drop down

I’m trying to create a searchable dropdown menu in html/js using select 2:

   <!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

        
        <title>Testing Select 2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <select style="width: 200px" name ="Select Dropdown" id="selectTest">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
    </select>
    </body>
</html>

<script>
$(document).ready(function() {
    $('.selectTest').select2();
});
</script>

However when running this code on apache netbeans the result is just a normal drop down menu. Is the issue stemming from me having the installation within the head, I just followed the documentation online.

Any help would be appreciated!

Answer

Solution:

I didn’t have the class name, oops. Here’s the solution:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>

        
        <title>Testing Select 2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <select style="width: 200px" name ="Select Dropdown" id="selectTest" class="js-example-basic-single">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">test </option>
    </select>
    </body>
</html>

<script>
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});
</script>