Select2 Not Working Properly on Website

Not really sure whats going on with it, as I believe I copied it how the Select2 website says to. I also believe that I have loaded the necessary files that it needs correctly via a CDN. I know something is wrong with the call of the Select2 function because I took it out completely and it still looks the same, despite lacking all of the select2 class codes. I feel like I’ve taken out everything and changed everything that I possibly can, and I am still not getting it to work. I really thought it would be just as simple as copying the CDN links, and calling the function like the examples on Select2’s website, but it appears my website isn’t accepting the code correctly. I will attach a picture of what I am seeing on my website as well as the code below. I will also attach a picture of what it should look like. Thank you in advance!

<?php
/*==================================================================================
README:

This global var (`root_dir`) must be set to the relative path
of the root directory.

E.g.
 If this page is in "career.clemson.edu/coop/"
 then the line should read
    $GLOBALS["root_dir"]="../";
 or if this page is in "career.clemson.edu/coop/students/";
 then the line should read
    $GLOBALS["root_dir"]="../../";


The template automatically includes common meta elemtents (keywords, etc),
common CSS files (ours, bootstrap, font-awesome), a fallback fon non-HTML5 compliant
browsers, and some basic javasript files at the end of the page.
Feel free to add any other things as needed on a per page basis!

All includes *should* in %root_dir%/includes


==================================================================================*/
    $GLOBALS["root_dir"]="../";
    require_once $GLOBALS["root_dir"].'includes.inc';
?>
<!doctype html>
<html lang="en">
<html><head>
<meta charset="UTF-8">
    <?php
        require_once $GLOBALS['include_loc']."common_meta.inc";
        require_once $GLOBALS['include_loc']."common_css.inc"; 
        require_once $GLOBALS['include_loc']."html5_shiv.inc";
    ?>
  <link rel="stylesheet" target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" target="_blank" rel="nofollow" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">

  <title>Resumes and Cover Letters</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <!-- jQuery library -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Latest compiled JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>


</head>

<body>
    <?php require_once $GLOBALS["include_loc"]."top_menu.inc";?> <!-- Top Menu -->
    <div class span="row">
    <script type="text/javascript">
        $(".js-example-placeholder-multiple").select2({
        placeholder: "Select a state"
        });
    </script>
    <select class="js-example-placeholder-multiple">
        <option value="AL">Alabama</option>
        ...
        <option value="WY">Wyoming</option>
    </select>
        </div>



    <?php require_once $GLOBALS["include_loc"]."footer.inc";?>  <!-- Footer -->
    <?php require_once $GLOBALS['include_loc']."basic_js.inc"; ?>   <!--Include JS Files at the end for speed-->
</body>
</html>

Screen Shot

What it should look like



You need to move your js after your HTML elements (otherwise the js can’t find the element (does not exist yet)).

ALSO:

  1. You should move your js lib just before the </body> tag

  2. use $( document ).ready(function() { … });) to wrap your js code, js should run only after DOM is ready.