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

：

あなただけ
使用$(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はウェブサイト上で正しく動作していません

答えて

関連する問題