Select2 在网站上无法正常工作答案

【问题标题】：Select2 Not Working Properly on WebsiteSelect2 在网站上无法正常工作
【发布时间】：2023-03-13 20:47:01
【问题描述】：

不太确定这是怎么回事，因为我相信我按照 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

【问题讨论】：

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

【解决方案1】：

你需要在你的 HTML 元素之后移动你的 js（否则 js 找不到元素（还不存在））。

还有：

您应该将您的 js 库移动到 </body> 标记之前
使用$( document ).ready(function() { ... });) to wrap your js code, js should run only after DOM is ready.

.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>

【讨论】：

非常感谢！这就是问题所在，我不敢相信这是导致问题的原因......
@BradleyNewman 尝试使用$( document ).ready(function() { ... });) 来包装你的 js 代码，这样 js 只会在 DOM 准备好后运行（html 等）
你是否也知道为什么它只占屏幕左侧的一小部分？我怎样才能让它变大？
@BradleyNewman 酷，请尽可能接受答案 =D 祝你编码顺利。
我应该将脚本 src 还是脚本本身包装在