EasyUI comboBox如何設定分組和多選

平常我們直接使用html的select表單，下拉菜單的元素隻能一個一個顯示，如果元素較多，選擇起來比較費事，而且不同類别都混在一起。使用comboBox可以分組分類顯示，這樣可以按照分組查找，然後在組内選擇。預設的select表單隻能同時選擇一個元素，如果使用了comboBox則可以設定為多選，這樣就可以同時選擇多個選項，在特定的業務場景下，非常有用。

方法/步驟

1. 首先需要引入easyui.css，jquery.min.js，jquery.easyui.min.js三個css和js庫檔案，然後添加一個表單，class屬性值填easyui-combobox，data-options如下格式填寫，groupField是分組的關鍵

   <input id="food" class="easyui-combobox" data-options="

   valueField:'id',

     textField:'text',

     url:'test.json',

     groupField:'group'">

   

2. json資料格式如圖所示，這裡的group就是資料的分組

   {

       "id":1,

       "text":"蘋果",

       "group":"水果"

   }

   

3. 打開網頁浏覽器，通路剛剛的html頁面，測試下看看頁面效果

   

4. 點選下拉框，可以看到我們設定的分組資料資訊，這裡按照我們設定的分組顯示了，水果，蔬菜，豆類，我們在選擇資料的時候，就可以先按分組，然後再選擇對應的元素

   

5. 以上我們點選選項的時候，隻能同時選擇一個，當選擇新的元素的時候，之前選擇的則自動取消了。但有時候業務就是需要多選，這個時候comboBox也是支援多選的。

   在data-options中添加一個multiple:true

   

6. 再次重新整理頁面，這個時候，我們同時選擇多個元素，如圖選擇了4個選項，4個選項都被同時選擇了，在表單框中，多個值以逗号分割

   

   END

注意事項

• easyui相容性很好，比自己實作的相容性要好很多。

轉自：https://jingyan.baidu.com/article/7e440953184e2a2fc0e2efc0.html

代碼補充參考：