一个基于js的下拉选择组件及其方法技术领域
本发明涉及前端技术领域，具体的说是一个基于js的下拉选择组件及其方法。
背景技术
近年来随着前端技术的不断发展，web界面的功能越来越丰富多彩及越来越多元
化。页面功能的丰富与强大离不开大量的前端代码，这也就导致了前端代码越来越多，越来
越臃肿。通常，在一个web项目中会多次用到不同页面上的功能可以通过封装，来达到减少
程序代码，优化程序的效果。
发明内容
本发明针对目前技术发展的需求和不足之处，提供一个基于js的下拉选择组件的
方法。
本发明所述一个基于js的下拉选择组件及其方法，解决上述技术问题采用的技术
方案如下：所述一个基于js的下拉选择组件的方法，主要包括如下步骤：1）定义对外提供的
接口函数，2）定义配置项的默认值，3）读取接口的传入参数，4）根据参数model与group的值
生成不同的下拉组件，包括单选分组、单选不分组、多选分组和多选不分组，5）读取参数
action的值，6）在用户选择完成，点击确定按钮后执行action对应的函数操作。
本发明中所述下拉选择组件支持单选与多选，全选以及分组全选，并且组件对外
提供一个接口；程序通过调用此接口并传入相关的配置项，能够生成一个下拉选择组件。
本发明所述一个基于js的下拉选择组件及其方法与现有技术相比具有的有益效
果是：本发明通过封装一个基于js的下拉选择组件的方法，并对外提供接口及配置参数，实
现多选、单选功能以及分组多选功能，有效减少前端代码量以及统一页面下拉选择组件的
样式，提高了代码质量，通过封装的下拉组件，可以使开发者更方便开发有关下拉功能的模
块，提高了代码的利用率。
附图说明
附图1为基于js的下拉选择组件的方法的流程图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，对本发
明所述一个基于js的下拉选择组件及其方法进一步详细说明。
本发明提出一个基于js的下拉选择组件的方法, 如附图1所示，主要包括如下步
骤：1）定义对外提供的接口函数，2）定义配置项的默认值，3）读取接口的传入参数，4）根据
参数model与group的值生成不同的下拉组件，包括单选分组、单选不分组、多选分组和多选
不分组，5）读取参数action的值，6）在用户选择完成，点击确定按钮后执行action对应的函
数操作。
本发明中所述下拉选择组件支持单选与多选，全选以及分组全选，并且组件对外
提供一个接口。程序通过调用此接口并传入相关的配置项，能够生成一个下拉选择组件,所
述下拉选择组件的样式是基于js的下拉菜单的样式。所述下拉选择组件的配置项主要用来
决定组件的模式、传入选择菜单的数据、下拉框的相对位置以及选择后的操作等。所述下拉
选择组件的模式分为两种：单选和多选；下拉框的相对位置分为三种：居左、居中和居右；选
择菜单的数据可以为一维数组也可以为二维数组。
实施例：
本实施例所述基于js的下拉选择组件,所述1）定义对外提供的接口函数是指，封装下
拉选中组件dropChosen.js，对外提供接口$.fn.dropchosen()。以多个参数的形式或一个
对象参数的形式进行接口参数传入。
以多个参数的形式进行接口参数传入，组件默认支持5个参数，第一个为组件的模
式，第二个为数据，第三个为选中后执行函数，第四个与第五个不是必须参数分别为下拉框
位置及选项是否分组，这两个参数的默认值为‘left’与false。形式如下：
$.fn.dropchosen(‘radio’, [‘选项一’，‘选项二’，‘选项三’]，function（）{//选择后
处理函数}，[‘left’,[false]])。
以一个对象参数的形式进行接口参数传入，则能够传入多个配置项，形式如下：
$.fn.dropchosen（{
model: ‘radio’,
data: [‘选项一’，‘选项二’，‘选项三’],
position: ‘left’，
group: false,
action: funcrion() {
//选择后处理函数
}
}）。
其中，第一个参数即配置项中的model，决定下拉选择组件的模式。‘radio’为单
选，‘check’为多选。data为传入组件的数据，若是该组件不支持选项分组，数据的格式为一
维数组，若是组件支持选项分组则数据的格式为二维数组。position表示下拉选择框的相
对位置，有三种：left(居左)、right（居右）和center（居中）。group表示是否支持选项分组，
false为不支持，true为支持。action为选中之后点击‘确定’按钮需要执行的操作。
本实施例例中，所述步骤2）定义配置项的默认值是指，首先定义一组默认的配置
项的参数，其中‘group’的默认值为false，‘position’的默认值为‘left’；所述步骤3）读取
接口的传入参数是指，判断用户以何种形式进行的传参，并且读取参数的值，若是某些参数
或者配置项没有传值，则读取默认配置项中的值。
所述步骤4）根据参数model与group的值生成不同的下拉组件是指，根据model的
值判断开发者想要一个什么模式的下拉组件，若是为‘radio’则为单选下拉组件，若为
‘check’则为多选下拉组件；然后再判断‘group’值，下拉组件可以组合为四种样式，即单选
分组，单选不分组，多选分组和多选不分组。
单选不分组：用户只可以选择一个选项，如果用户已经选择一个选项，再去选择另
一个后，前一个选择的就会失去选中。单选分组：同单选不分组。多选不分组：用户可以选择
多个选项，也可以在选择后，取消不想选中的选项，支持全部选中与全部不选中。多选分组：
用户可以选择多个选项，选择后也可以取消选中。支持一个组全部选中与一个组全部不选
中，同时也支持全部选中与全部不选中。
所述步骤5）读取参数action的值中，action的值为一个函数，该函数是在用户选
择完成之后点击‘确定’按钮后，需要执行的程序。
上述具体实施方式仅是本发明的具体个案，本发明的专利保护范围包括但不限于
上述具体实施方式，任何符合本发明的权利要求书的且任何所属技术领域的普通技术人员
对其所做的适当变化或替换，皆应落入本发明的专利保护范围。