选择2在网站上不能正常工作

时间:2017-08-25 19:50:12

标签: javascript jquery css twitter-bootstrap jquery-select2

不确定它是怎么回事,因为我相信我复制了Select2网站所说的内容。我也相信我已经通过CDN正确加载了所需的文件。我知道Select2函数的调用有问题,因为我把它完全取出并且看起来仍然相同,尽管缺少所有的select2类代码。我觉得我已经拿走了所有东西并且改变了我可能做的所有事情,而我仍然没有让它发挥作用。我真的认为这就像复制CDN链接一样简单,并且像Select2网站上的示例一样调用函数,但看来我的网站没有正确接受代码。我将附上我在网站上看到的图片以及下面的代码。我还将附上它应该是什么样子的图片。提前谢谢!

<?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" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" 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

Small on left side

1 个答案:

答案 0 :(得分:1)

您需要在HTML元素之后移动js(否则js找不到元素(尚不存在))。

ALSO:

  1. 您应该在</body>标记

  2. 之前移动您的js lib
  3. 使用$( document ).ready(function() { ... });) to wrap your js code, js should run only after DOM is ready.

  4. .centered {
      text-align: center;
    }
    <!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" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
    
        <title>Resumes and Cover Letters</title>
    
    
    
    </head>
    
    <body>
      <?php require_once $GLOBALS["include_loc"]."top_menu.inc";?>
      <!-- Top Menu -->
      <div class="centered" span="row">
        <select class="js-example-placeholder-multiple">
            <option value="AL">Alabama</option>
            ...
            <option value="WY">Wyoming</option>
        </select>
      </div>
    
    
      <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>
      <script type="text/javascript">
      $( document ).ready(function() {
          $(".js-example-placeholder-multiple").select2({
            placeholder: "Select a state",
            width: 150
          });
      });
      </script>
    
      <?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>