Select2在网站上无法正常工作

问题描述：

不太确定它发生了什么，因为我相信我已经复制了Select2网站的说法。我也相信我已经通过CDN正确加载了需要的文件。我知道Select2函数的调用有问题，因为我把它全部拿出来了，尽管缺少所有的select2类代码，它仍然看起来是一样的。我觉得我已经把所有东西都拿走了，并且改变了我所能做的一切，但我仍然没有得到它的工作。我真的认为它就像复制CDN链接一样简单，并像在Select2网站上的例子那样调用函数，但是看起来我的网站没有正确接受代码。我会附上一张我在网站上看到的图片以及下面的代码。我还会附上它应该是什么样子的图片。先谢谢你！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

答

你需要你的HTML元素后，将您的JS（否则JS找不到元素（尚不存在））。

ALSO：

你应该只在</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>

之前将您的js的lib

非常感谢！这是问题，我不能相信这是什么原因造成的问题... –

@BradleyNewman尝试使用'$（document）.ready（function（）{...}）;）'来包装你的js代码，所以js只会在DOM准备好后运行（html等等） –

你偶然也会知道为什么它只占用屏幕左侧的一小部分？我怎么能让它变大？ –

Select2在网站上无法正常工作

相关推荐