基本用法

单选下拉框

Select2 的设计目的是用来替代浏览器中显示的标准<select>下拉框。默认情况下，它支持标准下拉框中可用的所有选项和操作，并且具有更高的灵活性。

Select2 可以将像这样的普通下拉框...

转换为这样的样式...

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

如果你使用的是任何发布版本的 Select2，它会将自身注册为一个 jQuery 函数，因此你可以在任意需要初始化 Select2 的 jQuery 选择器上调用.select2()方法。

// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

在 DOM 尚未“就绪”之前，不能安全地对其进行操作。为了确保在浏览器初始化 Select2 控件之前 DOM 已经就绪，请将你的代码包裹在$(document).ready()代码块中。$(document).ready()每个页面只需要一个

多选下拉框（药丸状标签）

Select2 同样支持多值下拉框。下方的 select 元素声明了multiple属性。

在你的 HTML 中：

<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

在你的 JavaScript 文件中（外部.js资源或<script>标签内）：

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