我們在整個架構裡面，用到了很多Select2控件來處理内容的顯示，包括單選的下拉清單（包括級聯選擇框）、複選的下拉清單、樹形下拉清單等方式，界面效果如下所示。
1）編輯界面下的省份、城市、所在行政區的級聯界面效果，選擇省份，會加載對應省份下的城市，選擇城市，會繼續加載城市下的行政區，進而實作多級關聯的下拉清單效果。
2）編輯界面下的多項選擇下拉清單
但我們選擇其中的内容的時候，系統自動顯示出沒有選擇的清單資料，非常直覺友好，如下所示。
3）樹形清單的下拉清單
有時候，我們的一些資料可能有層次關系的，如所屬機構、上層清單等等。
使用select2控件，一般是在正常的select控件上，設定一下即可（設定它的class為select2）。
如果是固定清單，那麼也就是設定它的Option内容即可，如下所示。
簡單的select2控件初始化代碼如下所示。
一般情況下，如果允許複選多個項目，那麼設定 multiple="multiple"即可，如下代碼所示。
一般情況下，我們的select控件的資料，是從資料庫裡面動态加載的，是以一般是通過Ajax方式擷取資料并進行綁定即可。
基于代碼可重用性的考慮，我們編寫一個公用的JS函數，用來減少綁定操作的代碼，提高代碼重用性。
這樣，綁定公用字典子產品的資料，也就可以通過下面進一步封裝處理即可。
這樣我們初始化Select2 控件，并動态綁定對應的字典值或者其他資料，則可以通過下面初始化代碼即可實作。其中BindDictItem就是直接綁定字典内容的操作，BindSelect則是根據URL進行資料的擷取并綁定，而$("#Province").on("change", function (e) {});這樣的函數處理，就是處理選擇内容變化的關聯操作了。
而其中MVC控制器傳回的資料，我們是傳回一個JSON資料清單給前端頁面的，他們的資料格式如下所示。
這樣前端頁面綁定Select2控件的時候，就使用了JSON對象的屬性即可。
控制器的實作代碼如下：
對于屬性清單，如所屬公司、所屬部門機構等有層次性的資料，它的綁定操作也是類似的，如下代碼所示。
隻是它們傳回的資料，我們把它作為有縮進的顯示内容而已。
或者如下所示
綜上兩個部分，我們可以看到它們的Text的内容，是根據層次關系進行空格增加，進而實作了層次關系的顯示。
不過從這個界面效果上講，這樣的處理确實沒有EasyUI裡面，對下拉清單樹的展示好看，也許可以利用更好的Bootstrap插件進行這個樹形内容的展示。
上面介紹的方法，都是介紹select2控件的初始化，綁定相關的資料，那麼如果初始化界面後，我們綁定編輯界面的值的時候，就需要指派給控件，讓它顯示真正需要顯示的項目了。
如清空控件的方法如下所示。
如果對于多個控件，需要清除，則可以使用集合進行處理
給Select2 控件指派，讓它顯示對應值内容的項目，那麼操作也就和上面的類似了。
如果需要級聯顯示的，那麼做法增加一個onchange的函數處理就可以了，如下級聯代碼的指派處理如下。
多個清單項目資料的綁定。
我們從案例裡面可以看到，Select2支援多項值的選擇，它們儲存後會以逗号分開，如果我們需要在編輯的時候顯示存儲的多個記錄，那麼需要把字元串轉換為數組清單才能進行正确綁定，如下所示。
最後來兩個整體性的界面效果，供參考。
如果有興趣，可以繼續參考系列文章：
<a href="http://www.cnblogs.com/wuhuacong/p/4757984.html">基于Metronic的Bootstrap開發架構經驗總結（1）-架構總覽及菜單子產品的處理</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4759564.html">基于Metronic的Bootstrap開發架構經驗總結（2）--清單分頁處理和插件JSTree的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4774396.html">基于Metronic的Bootstrap開發架構經驗總結（5）--Bootstrap檔案上傳插件File Input的使用</a>
<a href="http://www.cnblogs.com/wuhuacong/p/4777720.html">基于Metronic的Bootstrap開發架構經驗總結（7）--資料的導入、導出及附件的檢視處理</a>