这个插件是基于Select的扩展插件，能够提供更加丰富的功能和用户体验，它的github官网地址为:，具体的使用案例，可以参考地址：。
我们在整个框架里面，用到了很多Select2控件来处理内容的显示，包括单选的下拉列表（包括级联选择框）、复选的下拉列表、树形下拉列表等方式，界面效果如下所示。
但我们选择其中的内容的时候，系统自动显示出没有选择的列表数据，非常直观友好，如下所示。
有时候，我们的一些数据可能有层次关系的，如所属机构、上层列表等等。
使用select2控件，一般是在常规的select控件上，设置一下即可（设置它的class为select2）。
如果是固定列表，那么也就是设置它的Option内容即可，如下所示。
简单的select2控件初始化代码如下所示。
一般情况下，如果允许复选多个项目，那么设置multiple="multiple"即可，如下代码所示。
一般情况下，我们的select控件的数据，是从数据库里面动态加载的，因此一般是通过Ajax方式获取数据并进行绑定即可。
基于代码可重用性的考虑，我们编写一个公用的JS函数，用来减少绑定操作的代码，提高代码重用性。
//绑定Ajax的内容
$.getJSON(url,function (data) {
control.empty();//清空下拉框
$.each(data,function (i,item) {
control.append("");
});
});
}
这样，绑定公用字典模块的数据，也就可以通过下面进一步封装处理即可。
这样我们初始化Select2 控件，并动态绑定对应的字典值或者其他数据，则可以通过下面初始化代码即可实现。其中BindDictItem就是直接绑定字典内容的操作，BindSelect则是根据URL进行数据的获取并绑定，而$("#Province").on("change",function (e) {});这样的函数处理，就是处理选择内容变化的联动操作了。
这样前端页面绑定Select2控件的时候，就使用了JSON对象的属性即可。
控制器的实现代码如下：
对于属性列表，如所属公司、所属部门机构等有层次性的数据，它的绑定操作也是类似的，如下代码所示。
或者如下所示
综上两个部分，我们可以看到它们的Text的内容，是根据层次关系进行空格增加，从而实现了层次关系的显示。
不过从这个界面效果上讲，这样的处理确实没有EasyUI里面，对下拉列表树的展示好看，也许可以利用更好的Bootstrap插件进行这个树形内容的展示。
上面介绍的方法，都是介绍select2控件的初始化，绑定相关的数据，那么如果初始化界面后，我们绑定编辑界面的值的时候，就需要赋值给控件，让它显示真正需要显示的项目了。
如清空控件的方法如下所示。
如果对于多个控件，需要清除，则可以使用集合进行处理
给Select2 控件赋值，让它显示对应值内容的项目，那么操作也就和上面的类似了。
如果需要级联显示的，那么做法增加一个onchange的函数处理就可以了，如下级联代码的赋值处理如下。
最后来两个整体性的界面效果，供参考。
以上所述是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用的相关内容，希望对大家有所帮助，如果大家想了解更多资讯敬请关注编程之家网站！
原文链接：https://www.f2er.com/bootstrap/48839.html