平常我们直接使用html的select表单，下拉菜单的元素只能一个一个显示，如果元素较多，选择起来比较费事，而且不同类别都混在一起。使用comboBox可以分组分类显示，这样可以按照分组查找，然后在组内选择。默认的select表单只能同时选择一个元素，如果使用了comboBox则可以设置为多选，这样就可以同时选择多个选项，在特定的业务场景下，非常有用。
工具/原料
1
easyui
2
网页浏览器
方法/步骤
1
首先需要引入easyui.css，jquery.min.js，jquery.easyui.min.js三个css和js库文件，然后添加一个表单，class属性值填easyui-combobox，data-options如下格式填写，groupField是分组的关键
2
json数据格式如图所示，这里的group就是数据的分组{ "id":1, "text":"苹果", "group":"水果"}
3
打开网页浏览器，访问刚刚的html页面，测试下看看页面效果
4
点击下拉框，可以看到我们设置的分组数据信息，这里按照我们设置的分组显示了，水果，蔬菜，豆类，我们在选择数据的时候，就可以先按分组，然后再选择对应的元素
5
以上我们点击选项的时候，只能同时选择一个，当选择新的元素的时候，之前选择的则自动取消了。但有时候业务就是需要多选，这个时候comboBox也是支持多选的。在data-options中添加一个multiple:true
6
再次刷新页面，这个时候，我们同时选择多个元素，如图选择了4个选项，4个选项都被同时选择了，在表单框中，多个值以逗号分割
注意事项
easyui兼容性很好，比自己实现的兼容性要好很多。
下一篇：男生怎么才能看起来更帅