我如何安装 JQuery select2？答案

【问题标题】：how do i install JQuery select2?我如何安装 JQuery select2？
【发布时间】：2017-07-07 08:11:18
【问题描述】：

我一直在尝试为我的下拉菜单安装和使用 select2，但我无法让它工作，我尝试按照此处记录的内容：how to use select2 bootstrap 但仍然没有运气这是我的代码：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<body>
<script>

$("#disease").select2({
  allowClear:true,
  placeholder: 'Search for a disease'
});
</script>
<select id="disease" style="width: 40%;  position: relative;top: 220px; left: 182px; " name="tdisease" >
                        <option value="">Select Disease</option>
                         <?php while ($row=$result->fetch_array(MYSQLI_ASSOC)) { ?>
                        <option value="<?php echo $row['ICD10']?>"><?php echo $row['diagnosis'];?> </option> 
                  <?php } ?> 
                     </select>

</body>

【问题讨论】：

你的 select2.js 在哪里？
您遇到了什么错误？你在哪里加载 jQuery 和 select2？
我做了一个 jsfiddle，你的代码（有一些修复）工作正常。为什么加了两次select2.css？
当发帖说“不起作用”时，详细说明它如何不起作用是很重要的。否则你怎么指望人们知道问题是什么？（总的来说；这里似乎很明显。）
你的 jQuery 呢？你的 JS 控制台里有什么？

标签： jquery html jquery-select2

【解决方案1】：

您需要安装 jQuery - 确保将它放在 Select2 文件之前。

您的代码应如下所示：

    <html>
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
      </head>
      <body>

        <select id="disease" style="width: 40%;  position: relative;top: 220px; left: 182px; " name="tdisease" >
            <option value="">Select Disease</option>
            <?php while ($row=$result->fetch_array(MYSQLI_ASSOC)) { ?>
              <option value="<?php echo $row['ICD10']?>"><?php echo $row['diagnosis'];?> </option> 
            <?php } ?> 
        </select>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
        <script>
        $(document).ready(function (){
           $("#disease").select2({
             allowClear:true,
             placeholder: 'Search for a disease'
           });
        })
        </script>

      </body>
    </html>

【讨论】：

这里是一个示例教程youtu.be/gTNQOxvuUv0

【解决方案2】：

包含 jQuery.js 脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

然后将您的 select2 呼叫置于document.ready 中，如下所示

$(document).ready(function (){
      $("#disease").select2({ 
            allowClear:true,       
            placeholder: 'Search for a disease'
        });
});

【讨论】：