[发明专利]一种实现可多选下拉列表框的方法

说明书

技术领域

本发明涉及软件技术开发技术领域，具体涉及一种实现可多选下拉列表框的方法。

背景技术

目前的业务系统不但越来越复杂而且用户体验要求也越来越高，如：用户在操作某个下拉框时，有可能会选择某些(不止一项)选项，通常的下拉框是由<select>标签的multiple属性来实现，由于这种方式要将全部或大部分选项显示出来，不仅占用了大量的页面布局空间，而且还影响页面整体效果。

发明内容

本发明解决的技术问题在于提供一种实现可多选下拉列表框的方法，解决下拉表框占用大量页面布局空间的问题。

本发明解决上述问题的技术方案是：

通过<input>与<div>标签组合来实现下拉框的多选功能。

包括以下步骤：

第1步、定义一个<input>标签同时设置id与name属性；

第2步、定义一个<div>标签同时设置id属性，并初始化所有选项值；

第3步、定义一个隐藏的<input>标同时设置id与name属性；

第4步、在页面加载时，利用EasyUI将<input>标签初始化为combo控件，并设置其属性multiple：true；

第5步、将<div>标签附加到combo的panel内，然后给<div>内的多选框元素绑定选中事件；

第6步、用户勾选checkbox选项框时触发选中事件将已选择的值存放到隐藏的<input>内，在输入框内显示用户所选的值。

本发明的有益效果是：通过常用的HTML标签组织来实现多选功能，用户可以根据需要随意选择，操作简单方便，结构简洁明了，不影响原有的页面布局，有效增强了用户体验度。

附图说明

下面结合附图对本发明进一步说明：

图1是本发明流程图；

图2是本发明的实际效果图。

具体实施方式

如图1、2所示，本发明通过将HTML的常用标签<input><div>组合实现下拉框的多选，具体步骤如下：

第1步、定义一个<input>标签同时设置id与name属性；

第2步、定义一个<div>标签同时设置id属性，并初始化所有选项值；

第3步、定义一个隐藏的<input>标同时设置id与name属性；

第4步、在页面加载时，利用EasyUI将<input>标签初始化为combo控件，并设置其属性multiple：true；

第5步、将<div>标签附加到combo的panel内，然后给<div>内的checkbox多选框元素绑定选中事件；

第6步、用户勾选checkbox选项框时触发选中事件将已选择的值存放到隐藏的<input>内，在输入框内显示用户所选的值。