Select2 doesn't render properly

问题

I am attemping to add Select2 library to my project, but I am failing miserably:

My code looks like this:

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

In the body:

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

What am I doing wrong?

回答1:

Please check: It is "rel" rather than "ref" in the CSS links

回答2:

Hei Dawid, You have a silly mistake in select2 including in your head section. There are no other problems in your code.

Just change the two lines where you write

<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">

Change ref to rel that's the solution.

<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">

Hopefully, you got the silly error.

来源：https://stackoverflow.com/questions/40773647/select2-doesnt-render-properly

标签

html

css

twitter-bootstrap-3

select2

jquery-select2-4