2016-11-08 108 views
-3

我的工作選擇2,第一次我試圖使用多個選擇2,但它不工作好心看我的代碼問題與jQuery選擇2

  $(document).ready(function() { 
 
      $("#e1").select2(); 
 
     });
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 

 
<select id="e1" style="width:300px" multiple="multiple"> 
 
    <option value="AL">Alabama</option> 
 
    <option value="Am">Amalapuram</option> 
 
    <option value="An">Anakapalli</option> 
 
    <option value="Ak">Akkayapalem</option> 
 
    <option value="WY">Wyoming</option> 
 
</select>

+1

請檢查您是否在控制檯中發現錯誤。 –

+0

我編輯了你的問題,沒有什麼看起來不對。 –

+0

腳本標籤未關閉 –

回答

0

$(document).ready(function() { 
 
        $("#e1").select2(); 
 
       });
<html> 
 
    <head>   
 
     <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script> 
 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"> 
 

 
    </head> 
 

 
    <body> 
 
     <select id="e1" style="width:300px" multiple="multiple"> 
 
      <option value="AL">Alabama</option> 
 
      <option value="Am">Amalapuram</option> 
 
      <option value="An">Anakapalli</option> 
 
      <option value="Ak">Akkayapalem</option> 
 
      <option value="WY">Wyoming</option> 
 
     </select> 
 
    </body> 
 
</html>

可能是您包含的JS問題或與版本, 檢查我創建的小提琴。

https://jsfiddle.net/rev8vkcr/

檢查我的HTML代碼。

<html> 
    <head>   
     <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"> 

     <script type='text/javascript'> 
       $(document).ready(function() { 
        $("#e1").select2(); 
       }); 
     </script> 

    </head> 

    <body> 
     <select id="e1" style="width:300px" multiple="multiple"> 
      <option value="AL">Alabama</option> 
      <option value="Am">Amalapuram</option> 
      <option value="An">Anakapalli</option> 
      <option value="Ak">Akkayapalem</option> 
      <option value="WY">Wyoming</option> 
     </select> 
    </body> 
</html> 
+0

謝謝先生,我發現問題 –

+0

@TalhaSarwar,這是什麼問題? –

0

似乎要麼你沒有加載jQuery,要麼是其他腳本已經控制了全局$。沒有關係select2

這應該是您的文件夾structre根據您的代碼。 This should be your folder structre

dist文件夾必須conain兩個文件夾js和css

的js文件夾應包含select2.min.js

css文件夾中應該包含select2.min.css

外js文件夾必須包含jQuery.js

這裏myhtml.html代碼就像

<html> 

    <head> 
    <link rel="stylesheet" href="dist/css/select2.min.css"> 
    <script src="js/jquery.js"></script> 
    <script src="dist/js/select2.min.js"></script> 
    <script> 
     $(function(){ 
     $("#e1").select2();  
     }); 
    </script> 

    <style> 
     body { 
     padding: 40px; 
     } 
    </style> 
    </head> 

<body> 
    <select id="e1" style="width: 300px" multiple="multiple"> 
     <option value="AK">Alaska</option> 
     <option value="HI">Hawaii</option> 
     <option value="CA">California</option> 
     <option value="NV">Nevada</option> 
     <option value="OR">Oregon</option> 
     <option value="WA">Washington</option> 
     <option value="AZ">Arizona</option> 
     <option value="CO">Colorado</option> 
     <option value="ID">Idaho</option> 
     <option value="MT">Montana</option> 
     <option value="NE">Nebraska</option> 
     <option value="NM">New Mexico</option> 
     <option value="ND">North Dakota</option> 
     <option value="UT">Utah</option> 
     <option value="WY">Wyoming</option> 
    </select> 
    </body> 

</html> 
+0

謝謝先生,我發現問題 –

+0

@TalhaSarwar有什麼問題? –