select2不起作用

时间:2016-12-22 06:52:55

标签: javascript html select2

我的select2无效。它只显示多个选择框

<form action="">
<select class="js-example-basic-multiple" 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>
</form>
<script type="text/javascript">
                $(".js-example-basic-multiple").select2();
</script>

控制台出错:     未捕获的TypeError:$(...)。select2不是函数     在HTMLDocument。

JS FIDDLE:

https://jsfiddle.net/y6ogss94/

1 个答案:

答案 0 :(得分:3)

如果你正确导入了这个运行正常 - jQuery库,select2 js和select2 css。

这里我从他们的cdn导入了jquery 2.0.0和select2 css和js,它运行正常:

&#13;
&#13;
 $(".js-example-basic-multiple").select2();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>


<form action="">
<select class="js-example-basic-multiple" 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>
</form>
&#13;
&#13;
&#13;

注意: 只有在包含js库和DOM已加载后才需要执行select2初始化代码,这是大多数jQuery插件的一般做法,不仅如此。因此,在使用此代码时,您应该在包含jquery和select2脚本之后编写此脚本:

<script>
$(document).ready(function(){
  $(".js-example-basic-multiple").select2();
});//document ready
</script>