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

來源

2017-08-25 Bradley Newman

你需要你的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

來源

2017-08-25 19:59:43

非常感謝！這是問題，我不能相信這是什麼原因造成的問題... –

@BradleyNewman嘗試使用'$（document）.ready（function（）{...}）;）'來包裝你的js代碼，所以js只會在DOM準備好後運行（html等等） –

你偶然也會知道爲什麼它只佔用屏幕左側的一小部分？我怎麼能讓它變大？ –

Select2在網站上無法正常工作

回答

相關問題