一种实现可多选下拉列表框的方法
【专利摘要】本发明涉及软件技术开发【技术领域】，具体涉及一种实现可多选下拉列表框的方法。本发明通过<input>与<div>标签组合来实现下拉框的多选功能。本发明有效解决了现有下拉框多选方式要将全部或大部分选项显示出来，占用大量的页面布局空间、影响页面整体效果的问题；可以用于下拉列表框的多选实现上。
【专利说明】一种实现可多选下拉列表框的方法
【技术领域】
[0001]本发明涉及软件技术开发【技术领域】，具体涉及一种实现可多选下拉列表框的方法。
【背景技术】
[0002]目前的业务系统不但越来越复杂而且用户体验要求也越来越高，如:用户在操作某个下拉框时，有可能会选择某些(不止一项)选项，通常的下拉框是由〈select〉标签的multiple属性来实现，由于这种方式要将全部或大部分选项显示出来，不仅占用了大量的页面布局空间，而且还影响页面整体效果。
【发明内容】
[0003]本发明解决的技术问题在于提供一种实现可多选下拉列表框的方法，解决下拉表框占用大量页面布局空间的问题。
[0004]本发明解决上述问题的技术方案是:
[0005]通过〈input〉与<div>标签组合来实现下拉框的多选功能。
[0006]包括以下步骤:
[0007]第I步、定义一个〈input〉标签同时设置id与name属性；
[0008]第2步、定义一个<div>标签同时设置id属性，并初始化所有选项值；
[0009]第3步、定义一个隐藏的〈input〉标同时设置id与name属性；
[0010]第4步、在页面加载时,利用EasyUI将〈input〉标签初始化为combo控件,并设置其属性 multiple:true ；
[0011]第5步、将<div>标签附加到combo的panel内，然后给<div>内的多选框元素绑定选中事件；
[0012]第6步、用户勾选checkbox选项框时触发选中事件将已选择的值存放到隐藏的〈input〉内，在输入框内显示用户所选的值。
[0013]本发明的有益效果是:通过常用的HTML标签组织来实现多选功能，用户可以根据需要随意选择，操作简单方便，结构简洁明了，不影响原有的页面布局，有效增强了用户体验度。
【专利附图】
【附图说明】
[0014]下面结合附图对本发明进一步说明:
[0015]图1是本发明流程图；
[0016]图2是本发明的实际效果图。
【具体实施方式】
[0017]如图1、2所示，本发明通过将HTML的常用标签〈inputXdiv〉组合实现下拉框的多选，具体步骤如下:
[0018]第I步、定义一个〈input〉标签同时设置id与name属性；
[0019]第2步、定义一个<div>标签同时设置id属性，并初始化所有选项值；
[0020]第3步、定义一个隐藏的〈input〉标同时设置id与name属性；
[0021]第4步、在页面加载时,利用EasyUI将〈input〉标签初始化为combo控件,并设置其属性 multiple:true ；
[0022]第5步、将<div>标签附加到combo的panel内，然后给<div>内的checkbox多选框元素绑定选中事件；
[0023]第6步、用户勾选checkbox选项框时触发选中事件将已选择的值存放到隐藏的〈input〉内，在输入框内显示用户所选的值。
【权利要求】
1.一种实现可多选的下拉列表框的方法，其特征在于:通过〈input〉与<div>标签组合来实现下拉框的多选功能。
2.根据权利要求1所述的实现可多选的下拉列表框的方法，其特征在于:包括以下步骤: 第I步、定义一个〈input〉标签同时设置id与name属性； 第2步、定义一个<div>标签同时设置id属性，并初始化所有选项值； 第3步、定义一个隐藏的〈input〉标同时设置id与name属性； 第4步、在页面加载时,利用EasyUI将〈input〉标签初始化为combo控件,并设置其属性 multiple:true ； 第5步、将<div>标签附加到combo的panel内，然后给<div>内的多选框元素绑定选中事件； 第6步、用户勾选checkbox选项框时触发选中事件将已选择的值存放到隐藏的〈input〉内，在输入框内显示用户所选的值。
【文档编号】G06F9/44GK104391693SQ201410636261
【公开日】2015年3月4日 申请日期:2014年11月12日 优先权日:2014年11月12日
【发明者】齐兆勇, 徐震宇, 孙傲冰, 季统凯 申请人:国云科技股份有限公司