一种美化下拉选框的生成方法及装置与流程

本发明涉及网页前端设计领域，特别涉及一种美化下拉选框的生成方法及装置。

背景技术：

当今社会，信息产业飞速发展，网络已经成为人们生活不可缺少的一部分。网络最大的优势就是可以向人们传递各种信息，而这种信息的传递大部分是通过网页完成的。网页是企业向用户提供信息(包括产品和服务)的一种方式，也是企业无形资产的重要组成部分，是宣传和反应企业形象和文化的重要窗口。

网页要能充分吸引访问者的注意力，让访问者产生视觉上的愉悦感。下拉选框在网页的多元化展示中经常被使用，但由于目前浏览器市场核心各异，下拉选框所呈现的效果也各不相同，使用其他元素构造一个功能相仿并足以赏心悦目的下拉选框是很多网站的首要选择，但是在现有技术中不同的模块用到的美化下拉选框绑定着不同的数据请求及显示效果，美化下拉选项列表的列表点击事件已经同这些数据请求及显示效果的前端编码绑定(前端编码至少包括：事件触发器)，因为前端编码不便于修改，造成现有技术可移植性较差，不利于程序员后期的开发。

技术实现要素：

本发明实施例的目的在于提供一种美化下拉选框的生成方法及装置，通过将触发函数与列表点击事件相互映射，不需要修改前端编码，能够直接修改触发函数，可移植性较好，方便程序员后期的开发。

为达到上述目的，本发明实施例公开了一种美化下拉选框的生成方法，包括：

搭建页面布局层叠样式表CSS；

在所述页面布局CSS的基础上，通过超文本标记语言HTML建立层结构；

在所述层结构中，生成美化选择结果显示层及美化下拉图标按钮；

获取所述HTML文档对象模型DOM中对象的事件触发器及所述事件触发器对应的触发函数，其中，所述事件触发器包括：fireEvent事件或initEvent事件，所述触发函数用于触发所述事件触发器；

在所述层结构中，将所述触发函数与第一列表点击事件相互映射，生成美化下拉选项列表，其中，所述第一列表点击事件为所述美化下拉列表中与所述事件触发器相对应的列表点击事件。

较佳的，在所述层结构中，将所述触发函数与第一列表点击事件相互映射，生成美化下拉选项列表之后，所述方法还包括：

在重复调用美化下拉选框时，执行对所述美化下拉选项列表的条目复制未美化下拉选项列表的条目，并重新生成所述美化下拉选框的绑定时间。

较佳的，所述获取所述HTML文档对象模型DOM中对象的事件触发器及所述事件触发器对应的触发函数，包括：

获取所述HTML DOM中Element对象的所有fireEvent事件或所有initEvent事件；

根据所述所有fireEvent事件或所述所有initEvent事件，构建并获取每个fireEvent事件的第一触发函数或每个initEvent事件的第二触发函数，其中，所述第一触发函数用于触发对应的fireEvent事件，所述第二触发函数用于触发对应的initEvent事件。

较佳的，所述搭建页面布局层叠样式表CSS，包括：

覆盖所述美化下拉选框在未美化下拉选框上，搭建所述页面布局CSS。

较佳的，所述生成美化选择结果显示层及美化下拉图标按钮，包括：

在接收对所述美化下拉选项列表的条目中的第一条目的选择指令时，根据所述选择指令，生成显示所述第一条目的所述美化选择结果显示层，其中，所述第一条目为所述美化下拉选项列表中的任一条目；

获取按钮点击事件，生成与所述按钮点击事件对应的所述美化下拉图标按钮。

较佳的，所所述将所述触发函数与第一列表点击事件相互映射，生成美化下拉选项列表，包括：

复制未美化下拉选项列表的条目，得到所述美化下拉选项列表的条目；

获取列表点击事件，绑定所述列表点击事件到所述美化下拉选项列表的条目；

将所述触发函数嵌入所述第一列表点击事件中，生成所述美化下拉选项列表。

本发明实施例提供了一种美化下拉选框的生成装置，包括：

页面布局搭建模块，用于搭建页面布局层叠样式表CSS；

HTML层结构建立模块，用于在所述页面布局CSS的基础上，通过超文本标记语言HTML建立层结构；

第一美化元素生成模块，用于在所述层结构中，生成美化选择结果显示层及美化下拉图标按钮；

触发函数获取模块，用于获取HTML文档对象模型DOM中对象的事件触发器及所述事件触发器对应的触发函数，其中，所述事件触发器包括：fireEvent事件或initEvent事件，所述触发函数用于触发所述事件触发器；

第二美化元素生成模块，用于在所述层结构中，将所述触发函数与第一列表点击事件相互映射，生成美化下拉选项列表，其中，所述第一列表点击事件为所述美化下拉列表中与所述事件触发器相对应的列表点击事件。

较佳的，所述美化下拉选框的生成装置还包括：

重复调用模块，用于在重复调用美化下拉选框时，执行对所述第一美化下拉选项列表的条目复制未美化下拉选项列表的条目，并重新生成所述美化下拉选框的绑定时间。

较佳的，所述触发函数获取模块，包括：

事件获取子模块，用于获取所述HTML DOM中Element对象的所有fireEvent事件或所有initEvent事件；

函数构建子模块，用于根据所述所有fireEvent事件或所述所有initEvent事件，构建并获取每个fireEvent事件的第一触发函数或每个initEvent事件的第二触发函数，其中，所述第一触发函数用于触发对应的fireEvent事件，所述第二触发函数用于触发对应的initEvent事件。

较佳的，所述页面布局搭建模块具体用于：

覆盖所述美化下拉选框在未美化下拉选框上，搭建所述页面布局CSS。

由上述的技术方案可见，在本发明实施例中，与列表点击事件相互映射的为触发函数，而不是绑定前端编码，实现了美化下拉选项列表的列表点击事件与前端编码的分离。本发明实施例通过将触发函数与美化下拉选项列表绑定的列表点击事件相互映射，能够直接修改触发函数，可移植性较高，方便程序员后期的开发。当然，实施本发明的任一产品或方法必不一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例的美化下拉选框的生成方法的一种流程示意图；

图2为本发明实施例的美化下拉选框覆盖未美化下拉选框的示意图；

图3为本发明实施例的美化下拉选框的生成方法的另一种流程示意图；

图4为本发明实施例的美化下拉选框的生成装置的示意图；

图5为本发明实施例的美化下拉选框与Firefox、Google Chrome、IE浏览器中初始的未美化下拉选框对比效果示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，图1为本发明实施例的美化下拉选框的生成方法的一种流程示意图，包括：

步骤101，搭建页面布局层叠样式表CSS。

本发明实施例通过利用美化下拉选框覆盖未美化下拉选框(也可以称为原生<select>)的方法，实现美化下拉选框在浏览器上的应用。在美化下拉选框生成时，首先，搭建页面布局CSS(Cascading Style Sheets，层叠样式表)，使美化元素层叠在原生<select>层之上。

步骤102，在页面布局CSS的基础上，通过超文本标记语言HTML建立层结构。

根据页面布局CSS，通过HTML(Hyper Text Markup Language，超文本标记语言)建立HTML层结构，HTML层结构中元素的表现形式由页面布局CSS中的内容控制。

步骤103，在层结构中，生成美化选择结果显示层及美化下拉图标按钮。

在HTML层结构中，动态生成美化选择结果显示层及美化下拉图标按钮。

步骤104，获取HTML文档对象模型DOM中对象的事件触发器及事件触发器对应的触发函数。

其中，事件触发器包括：fireEvent事件或initEvent事件，触发函数用于触发事件触发器。

获取HTML DOM(Document Object Model，文档对象模型)中Element对象的事件触发器，并掌握事件触发器的使用方法，根据事件触发器构建该事件触发器的触发函数。

步骤105，在层结构中，将触发函数与第一列表点击事件相互映射，生成美化下拉选项列表。

其中，第一列表点击事件为美化下拉列表中与事件触发器相对应的列表点击事件。

事件触发器与未美化下拉选项列表的条目具有对应关系，而美化下拉选项列表的条目，复制未美化下拉选项列表的条目得到，所以事件触发器与美化下拉选项列表的条目具有对应关系。又因为触发函数是根据事件触发器构建的，而美化下拉选项列表的条目各自绑定着列表点击事件，所以触发函数与列表点击事件有对应关系。

将触发函数与第一列表点击事件相互映射的方法包括：将触发函数嵌入第一列表点击事件内或其他符合本发明实施例的映射方法。

将触发函数与美化下拉选项列表的条目绑定的列表点击事件相互映射，保证程序员对原生<select>操作代码的执行。

在本发明实施例中，与列表点击事件相互映射的为触发函数，而不是绑定前端编码，实现了美化下拉选项列表的列表点击事件与前端编码的分离，方便程序员后期对美化下拉选框的开发，可移植性好。

优选的，在本发明实施例的美化下拉选框的生成方法中，在HTML层结构中，将触发函数与第一列表点击事件相互映射之后，该方法还包括：

在重复调用美化下拉选框时，执行对美化下拉选项列表的条目复制未美化下拉选项列表的条目，并重新生成美化下拉选框的绑定时间。

在web端二级联动情况是经常用到的，所以需要添加重复调用判断，已初始化过的美化下拉选框，在重复调用时执行对美化下拉选项列表条目复制原生<select>子选项<option>，重新生成美化下拉选项列表的条目，以及重新生成下拉选框时间绑定。添加重复调用判断适用于二级联动，AJAX(Asynchronous Javascript And XML，异步JavaScript和XML)重新调取原生<select>内容的情况，或者在程序员动态改版原生<select>子选项时做一次调用。例如，初始时第一美化下拉选项列表的选中条目为福建省，相应的第二美化下拉选项列表的条目对应福建省的各个地级市，当第一美化下拉选项列表的选中条目变更为广东省时，执行对第二美化下拉选项列表条目复制原生<select>子选项<option>，将第二美化下拉选项列表的条目更变为广东省的各个地级市。或初始时美化下拉选项列表的条目为福建省，程序员动态改版原生<select>子选项中的福建省为闽，则执行对美化下拉选项列表条目复制原生<select>子选项<option>，将美化下拉选项列表的该条目变更为闽。

通过本发明实施例，添加重复调用判断，考虑了二级联动情况，拓展了本发明实施例的实用性。

优选的，在本发明实施例的美化下拉选框的生成方法中，获取文档对象模型HTML DOM中对象的事件触发器及事件触发器对应的触发函数，其步骤包括：

第一步，获取HTML DOM中Element对象的所有fireEvent事件或所有initEvent事件。

第二步，根据fireEvent事件或initEvent事件，构建并获取每个fireEvent事件的第一触发函数或每个initEvent事件的第二触发函数。

其中，第一触发函数用于触发对应的fireEvent事件，第二触发函数用于触发对应的initEvent事件。

在美化下拉选框时，首先要获取HTML DOM中Element对象的fireEvent事件或initEvent事件，并掌握fireEvent事件或initEvent事件的使用方法。根据fireEvent事件的使用方法分别构建每个fireEvent事件的第一触发函数，或根据initEvent事件的使用方法分别构建每个initEvent事件的第二触发函数。

通过本发明实施例的方法，构建每个fireEvent事件的第一触发函数或每个initEvent事件的第二触发函数，为后续嵌入第一触发函数或第二触发函数至列表点击事件，以实现前端编码的分离，提供了技术上的支持。

优选的，在本发明实施例的美化下拉选框的生成方法中，搭建页面布局层叠样式表CSS，包括：

覆盖美化下拉选框在未美化下拉选框上，搭建页面布局CSS。

如图2所示，图2为本发明实施例的美化下拉选框覆盖未美化下拉选框的示意图。图2中包括：原生<select>201，美化下拉图标按钮202，美化选择结果显示层203，美化下拉选项列表204和美化下拉选项列表的条目205。在美化下拉选框的生成过程中，利用美化下拉选框覆盖原生<select>201的方法显然要比直接修改原生<select>201的方法简单的多。搭建页面布局CSS(Cascading Style Sheets，层叠样式表)，利用相对定位与绝对定位相互依赖的原理，和DIV(DIVision，层叠样式表定位技术)层次设置，让美化下拉选框叠在原生<select>201之上，覆盖原生<select>201，达到美化下拉选框与原生<select>201共存但是只看到美化下拉选框的效果。

通过本发明实施例，在搭建页面布局的过程中，利用美化下拉选框覆盖未美化下拉选框，而不是直接修改未美化下拉选框，减少程序员的工作量，更加省时省力，同时美化下拉选框的呈现效果可在CSS样式文件自主修改，不涉及复制逻辑。

优选的，在本发明实施例的美化下拉选框的生成方法中，生成美化选择结果显示层及美化下拉图标按钮，其步骤包括：

第一步，在接收对美化下拉选项列表的条目中的第一条目的选择指令时，根据选择指令，生成显示第一条目的美化选择结果显示层。

其中，第一条目为美化下拉选项列表中的任一条目。

第二步，获取按钮点击事件，生成与按钮点击事件对应的美化下拉图标按钮。

在本发明实施例中，为了模拟原生<select>的实现过程，实现网页的多元化展示，还要考虑美化下拉选框的生成效果，动态生成美化选择结果显示层及美化下拉图标按钮。生成美化选择结果显示层，当接收到美化下拉选项列表的条目选择指令时，执行将被选中的条目显示到美化选择结果显示层中，同时相应的改变原生<select>子选项<option>的选中状态。获取按钮点击事件，给美化下拉图标按钮绑定按钮点击事件。在美化下拉选项列表的显示效果为显示时，若接收到美化下拉图标按钮选择指令，执行美化下拉选项列表的显示效果由显示变为隐藏；在美化下拉选项列表的显示效果为隐藏时，若接收到美化下拉图标按钮选择指令，执行美化下拉选项列表的显示效果由隐藏变为显示。

通过本发明实施例，动态生成了美化选择结果显示层，有效的实现了被选中的条目的显示，动态生成了美化下拉图标按钮，有效的实现了美化下拉选项列表的显示或隐藏，有利于网页的多元化展示。

优选的，在本发明实施例的美化下拉选框的生成方法中，将触发函数与第一列表点击事件相互映射，生成美化下拉选项列表，其步骤包括：

第一步，复制未美化下拉选项列表的条目，得到美化下拉选项列表的条目。

第二步，获取列表点击事件，绑定列表点击事件到美化下拉选项列表的条目。

第三步，将触发函数嵌入第一列表点击事件中，生成美化下拉选项列表。

其中，第一列表点击事件为美化下拉列表中与事件触发器相对应的列表点击事件。

复制原生<select>子选项<option>得到美化下拉选项列表的条目，获取列表点击事件，绑定列表点击事件到下拉选项列表的条目，获取触发函数，并将触发函数嵌入到对应的列表点击事件中。

事件触发器与原生<select>子选项<option>具有对应关系，而美化下拉选项列表的条目，复制原生<select>子选项<option>得到，所以事件触发器与美化下拉选项列表的条目具有对应关系。又因为触发函数是根据事件触发器构建的，而美化下拉选项列表的条目各自绑定着列表点击事件，所以触发函数与列表点击事件有对应关系。

通过本发明实施例，动态生成了美化下拉选项列表，将触发函数嵌入对应的列表点击事件中，实现了美化下拉选项列表的列表点击事件与前端编码的分离，方便程序员后期对美化下拉选框的开发，有利于网页的多元化展示。

图3为本发明实施例的美化下拉选框的生成方法的另一种流程示意图，其步骤包括：

步骤301，搭建页面布局CSS，利用相对定位与绝对定位相互依赖的原理，和DIV层次设置，让美化下拉选框叠在未美化下拉选框(原生<select>之上)，覆盖原生<select>，达到美化下拉选框与原生<select>共存但只看到美化下拉选框的效果。

步骤302，在步骤301的基础上搭建HTML层结构。

步骤303，构建JS(Java Script)代码，动态生成美化下拉选框。

其中，美化下拉选框至少包括：美化选择结果显示层、美化下拉图标按钮和美化下拉选项列表，美化下拉选项列表的条目复制原生<select>子选项<option>得到。

步骤304，绑定列表点击事件到美化下拉选项列表的条目。

其中，当接收到美化下拉选项列表的条目的选定指令时，显示被选择的条目至美化选择结果显示层中，并相应的改变原生<select>子选项<option>的选中状态。

步骤305，获取HTML DOM中Element对象的fireEvent事件或initEvent事件，并掌握该fireEvent事件或initEvent事件的使用方法。

步骤306，构建并获取每个fireEvent事件的第一触发函数或每个initEvent事件的第二触发函数，并将第一触发函数或第二触发函数嵌入在美化下拉选项列表点击事件内，以保证程序员对原生<select>操作代码的执行。

其中，第一触发函数用于触发对应的fireEvent事件，第二触发函数用于触发对应的initEvent事件。

步骤307，绑定按钮点击事件到美化下拉图标按钮，用于动态切换美化下拉选项列表的显示和隐藏。

步骤308，添加重复调用判断，对于已初始化过的下拉选框，在重复调用时执行对下拉选项列表条目复制原生<select>元素子选项<option>，以及重新生成下拉选框时间绑定。

在美化下拉选框的生成过程中，首先，编写CSS文件。

本发明实施例通过利用美化下拉选框覆盖原生<select>的方法，实现美化下拉选框的生成。搭建页面布局CSS，利用相对定位与绝对定位相互依赖的原理，和DIV层次设置，让美化下拉选框叠在原生<select>之上，覆盖原生<select>，达到美化下拉选框与原生<select>共存但是只看到美化下拉选框的效果。

然后，编写HTML文件。

根据页面布局CSS，搭建HTML层结构，其中，HTML层结构内元素的表现形式由CSS文件控制。

最后，编写JS脚本。

动态生成美化下拉选框。复制原生<select>子选项<option>得到美化下拉选项列表的条目，获取列表点击事件，绑定列表点击事件到美化下拉选项列表的条目，当用户选择美化下拉选项列表的任一条目时，被选中的条目会动态的显示到美化选择结果显示层中，同时相应的改变原生<select>子选项<option>的选中状态。获取按钮点击事件，绑定列表点击事件到美化下拉图标按钮，当用户点击美化下拉图标按钮时，可以实现美化下拉选项列表的显示效果在显示和隐藏之间切换。

为了实现下拉选项列表点击事件与前端编码的分离，本发明实施例采用嵌入触发函数的方法，给列表点击事件嵌入第一触发函数或第二触发函数。获取HTML DOM中Element对象的所有fireEvent事件或所有initEvent事件，并掌握fireEvent事件或initEvent事件的使用方法。根据掌握的HTML DOM中Element对象的fireEvent事件或initEvent事件的使用方法，构建fireEvent事件的第一触发函数或initEvent事件的第二触发函数，然后将第一触发函数或第二触发函数嵌入到下拉选项列表的条目绑定的列表点击事件内，以保证程序员对原生<select>操作代码的执行。

此外，还可以在通告中添加重复调用判断。

在web端二级联动情况是经常用到的，所以需要添加重复调用判断，已初始化过的美化下拉选框，在重复调用时执行对下拉选项列表条目复制原生<select>子选项<option>，以及重新生成下拉选框时间绑定。添加重复调用判断适用于二级联动，AJAX重新调取原生<select>内容的情况，或者在程序员动态改版原生<select>子选项时做一次调用。

通过将触发函数与美化下拉选项列表绑定的列表点击事件相互映射，方便程序员后期对美化下拉选框的开发，可移植性好。与列表点击事件相互映射的为触发函数，而不是绑定前端编码，实现了美化下拉选项列表的列表点击事件与前端编码的分离，方便后期程序员嵌入后端代码，这种分离程序员逻辑的美化下拉选框的JS(Java Script)脚本具有可移植性和通用性，并且不用重复美化代码，代码冗余度低，下拉选框的呈现效果可在CSS样式文件自主修改，不涉及复制逻辑。

图4为本发明实施例的美化下拉选框的生成装置的示意图，包括：

页面布局搭建模块401，用于搭建页面布局层叠样式表CSS。

HTML层结构建立模块402，用于在页面布局CSS的基础上，通过超文本标记语言HTML建立层结构。

第一美化元素生成模块403，用于在层结构中，生成美化选择结果显示层及美化下拉图标按钮。

触发函数获取模块404，用于获取HTML文档对象模型DOM中对象的事件触发器及事件触发器对应的触发函数。

其中，事件触发器包括：fireEvent事件或initEvent事件，触发函数用于触发事件触发器。

第二美化元素生成模块405，用于在层结构中，将触发函数与第一列表点击事件相互映射，生成美化下拉选项列表。

其中，第一列表点击事件为美化下拉列表中与事件触发器相对应的列表点击事件。

在本发明实施例中，与列表点击事件相互映射的为触发函数，而不是绑定前端编码，实现了美化下拉选项列表的列表点击事件与前端编码的分离，方便程序员后期对美化下拉选框的开发，可移植性好。

需要说明的是，本发明实施例的装置是应用上述美化下拉选框的生成方法的装置，则上述美化下拉选框的生成方法的所有实施例均适用于该装置，且均能达到相同或相似的有益效果。

优选的，本发明实施例的美化下拉选框的生成装置还包括：

重复调用模块，用于在重复调用美化下拉选框时，执行对第一美化下拉选项列表的条目复制未美化下拉选项列表的条目，并重新生成美化下拉选框的绑定时间。

通过本发明实施例，添加重复调用判断，考虑了二级联动情况，拓展了本发明实施例的实用性。

优选的，在本发明实施例的美化下拉选框的生成装置中，触发函数获取模块404，包括：

事件获取子模块，用于获取HTML DOM中Element对象的所有fireEvent事件或所有initEvent事件。

函数构建子模块，用于根据fireEvent事件或initEvent事件，构建并获取每个fireEvent事件的第一触发函数或每个initEvent事件的第二触发函数，其中，第一触发函数用于触发对应的fireEvent事件，第二触发函数用于触发对应的initEvent事件。

通过本发明实施例的装置，构建每个fireEvent事件的第一触发函数或每个initEvent事件的第二触发函数，为后续嵌入第一触发函数或第二触发函数至列表点击事件，以实现前端编码的分离，提供了技术上的支持。

优选的，在本发明实施例的美化下拉选框的生成装置中，页面布局搭建模块401具体用于：

覆盖美化下拉选框在未美化下拉选框上，搭建页面布局CSS。

通过本发明实施例，在搭建页面布局的过程中，利用美化下拉选框覆盖未美化下拉选框，而不是直接修改未美化下拉选框，减少程序员的工作量，更加省时省力。

优选的，在本发明实施例的美化下拉选框的生成装置中，第一美化元素生成模块403，包括：

选择结果显示层生成子模块，用于在接收对美化下拉选项列表的条目中的第一条目的选择指令时，根据选择指令，生成显示第一条目的美化选择结果显示层。

其中，第一条目为美化下拉选项列表中的任一条目。

下拉图标按钮生成子模块，用于获取按钮点击事件，生成与按钮点击事件对应的美化下拉图标按钮。

通过本发明实施例，动态生成了美化选择结果显示层，有效的实现了被选中的条目的显示，动态生成了美化下拉图标按钮，有效的实现了美化下拉选项列表的显示或隐藏，有利于网页的多元化展示。

优选的，在本发明实施例的美化下拉选框的生成装置中，第二美化元素生成模块405，包括：

条目生成子模块，用于复制未美化下拉选项列表的条目，得到美化下拉选项列表的条目。

条目绑定子模块，用于获取列表点击事件，绑定列表点击事件到美化下拉选项列表的条目。

下拉选项列表生成子模块，用于将触发函数嵌入第一列表点击事件中，生成美化下拉选项列表。

通过本发明实施例，动态生成了美化下拉选项列表，将触发函数嵌入对应的列表点击事件中，实现了美化下拉选项列表的列表点击事件与前端编码的分离，方便程序员后期对美化下拉选框的开发，有利于网页的多元化展示。

通过本发明实施例，动态生成了美化下拉选框，有效的实现了美化下拉选项列表的显示或隐藏，有利于网页的多元化展示。

参见图5，图5为本发明实施例的美化下拉选框与Firefox、Google Chrome、IE浏览器中初始的未美化下拉选框对比效果示意图。图5包括：Firefox浏览器的未美化下拉选框501，Google Chrome浏览器的未美化下拉选框502，IE浏览器的未美化下拉选框503和本发明实施例的美化下拉选框504。通过对比可以得出，美化下拉选框的视觉效果明显优于Firefox、Google Chrome、IE浏览器中初始的未美化下拉选框的视觉效果。

通过本发明实施例可以得出，本发明的美化下拉选框的生成方法及装置，能够增强美化下拉选框的视觉效果，提升用户体验，让用户产生视觉上的愉悦感。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。