jquery select2的问题答案

【问题标题】：issues with jquery select2jquery select2的问题
【发布时间】：2017-03-21 18:12:56
【问题描述】：

我第一次尝试使用多个 select2，但它不起作用请查看我的代码

         $(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>

【问题讨论】：

请检查您是否在控制台中收到任何错误。
我已经编辑了您的问题，似乎没有任何问题。
脚本标签未关闭
@PunitGajjar 在控制台上是的，它显示 select2() 不是函数
确保正确包含 JS

标签： jquery select2

【解决方案1】：

$(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>

【讨论】：

@TalhaSarwar，出了什么问题？

【解决方案2】：

似乎你没有加载 jQuery，或者其他一些脚本已经控制了全局 $.与select2无关

根据您的代码，这应该是您的文件夹结构。

dist 文件夹必须包含两个文件夹 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>

【讨论】：

@TalhaSarwar 出了什么问题？？