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

代码补充参考：