Select2 无法正确渲染答案

【问题标题】：Select2 doesn't render properlySelect2 无法正确渲染
【发布时间】：2016-11-23 20:29:47
【问题描述】：

我正在尝试将 Select2 库添加到我的项目中，但我失败了：

我的代码如下所示：

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link ref="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<link ref="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
</head>

在体内：

<form>
  <input type="hidden" name="page" value="products"/>
  <div class="form-group">
    <label for="exampleInputEmail1">Include</label>
    <select class="form-control select2" name="inc" multiple>
      <option>Chicken</option>
      <option>Ready Meals</option>
      <option>Rice</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Exclude</label>
    <select class="form-control select2" name="exc" multiple>
      <option>Chicken</option>
      <option>Ready Meals</option>
      <option>Rice</option>
    </select>
  </div>
  <script type="text/javascript">
    $(".select2").select2({ multiple: true});
  </script>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
 </form>

我做错了什么？

【问题讨论】：

CSS 链接中是“rel”而不是“ref”

标签： html css twitter-bootstrap-3 select2 jquery-select2-4

【解决方案1】：

请检查：在 CSS 链接中它是“rel”而不是“ref”

【讨论】：

【解决方案2】：

嘿，大卫，您在 select2 中（包括在您的头部）中犯了一个愚蠢的错误。您的代码中没有其他问题。

只需改变你写的两行

<link ref="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css"> <link ref="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.css">

将ref 更改为rel 这就是解决方案。

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

希望你遇到了愚蠢的错误。

【讨论】：