基本用法

单选框

Select2旨在替代标准<select> 浏览器显示的对话框。默认情况下,它支持标准选择框中可用的所有选项和操作,但具有更大的灵活性。

Select2可以采用这样的常规选择框…

并把它变成这个…

<select class="js-example-basic-single" name="state">
  <option value="AL">阿拉巴马州</option>
    ...
  <option value="WY">怀俄明州</option>
</select>

如果您使用任何发行版,Select2会将其自身注册为jQuery函数,因此您可以调用 .select2()在您要初始化Select2的任何jQuery选择器上。

//在Javascript中(external.js资源或<script>标记)
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

在“ready”之前,无法安全地操作DOM。为确保浏览器初始化Select2控件之前DOM已准备就绪,请将代码包含在$(document).ready()块。只有一个$(document).ready()每页需要块。

多选框(pillbox)

Select2还支持多值选择框。以下选择用声明multiple属性。

在您的HTML中:

<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
  <option value="AL">阿拉巴马州</option>
    ...
  <option value="WY">怀俄明州</option>
</select>

在您的Javascript中(外部.js 资源或 <script> 标签):

$(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});