本發(fā)明涉及網(wǎng)頁前端設計領域，特別涉及一種美化下拉選框的生成方法及裝置。

背景技術：

當今社會，信息產(chǎn)業(yè)飛速發(fā)展，網(wǎng)絡已經(jīng)成為人們生活不可缺少的一部分。網(wǎng)絡最大的優(yōu)勢就是可以向人們傳遞各種信息，而這種信息的傳遞大部分是通過網(wǎng)頁完成的。網(wǎng)頁是企業(yè)向用戶提供信息(包括產(chǎn)品和服務)的一種方式，也是企業(yè)無形資產(chǎn)的重要組成部分，是宣傳和反應企業(yè)形象和文化的重要窗口。

網(wǎng)頁要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感。下拉選框在網(wǎng)頁的多元化展示中經(jīng)常被使用，但由于目前瀏覽器市場核心各異，下拉選框所呈現(xiàn)的效果也各不相同，使用其他元素構造一個功能相仿并足以賞心悅目的下拉選框是很多網(wǎng)站的首要選擇，但是在現(xiàn)有技術中不同的模塊用到的美化下拉選框綁定著不同的數(shù)據(jù)請求及顯示效果，美化下拉選項列表的列表點擊事件已經(jīng)同這些數(shù)據(jù)請求及顯示效果的前端編碼綁定(前端編碼至少包括：事件觸發(fā)器)，因為前端編碼不便于修改，造成現(xiàn)有技術可移植性較差，不利于程序員后期的開發(fā)。

技術實現(xiàn)要素：

本發(fā)明實施例的目的在于提供一種美化下拉選框的生成方法及裝置，通過將觸發(fā)函數(shù)與列表點擊事件相互映射，不需要修改前端編碼，能夠直接修改觸發(fā)函數(shù)，可移植性較好，方便程序員后期的開發(fā)。

為達到上述目的，本發(fā)明實施例公開了一種美化下拉選框的生成方法，包括：

搭建頁面布局層疊樣式表CSS；

在所述頁面布局CSS的基礎上，通過超文本標記語言HTML建立層結構；

在所述層結構中，生成美化選擇結果顯示層及美化下拉圖標按鈕；

獲取所述HTML文檔對象模型DOM中對象的事件觸發(fā)器及所述事件觸發(fā)器對應的觸發(fā)函數(shù)，其中，所述事件觸發(fā)器包括：fireEvent事件或initEvent事件，所述觸發(fā)函數(shù)用于觸發(fā)所述事件觸發(fā)器；

在所述層結構中，將所述觸發(fā)函數(shù)與第一列表點擊事件相互映射，生成美化下拉選項列表，其中，所述第一列表點擊事件為所述美化下拉列表中與所述事件觸發(fā)器相對應的列表點擊事件。

較佳的，在所述層結構中，將所述觸發(fā)函數(shù)與第一列表點擊事件相互映射，生成美化下拉選項列表之后，所述方法還包括：

在重復調(diào)用美化下拉選框時，執(zhí)行對所述美化下拉選項列表的條目復制未美化下拉選項列表的條目，并重新生成所述美化下拉選框的綁定時間。

較佳的，所述獲取所述HTML文檔對象模型DOM中對象的事件觸發(fā)器及所述事件觸發(fā)器對應的觸發(fā)函數(shù)，包括：

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

根據(jù)所述所有fireEvent事件或所述所有initEvent事件，構建并獲取每個fireEvent事件的第一觸發(fā)函數(shù)或每個initEvent事件的第二觸發(fā)函數(shù)，其中，所述第一觸發(fā)函數(shù)用于觸發(fā)對應的fireEvent事件，所述第二觸發(fā)函數(shù)用于觸發(fā)對應的initEvent事件。

較佳的，所述搭建頁面布局層疊樣式表CSS，包括：

覆蓋所述美化下拉選框在未美化下拉選框上，搭建所述頁面布局CSS。

較佳的，所述生成美化選擇結果顯示層及美化下拉圖標按鈕，包括：

在接收對所述美化下拉選項列表的條目中的第一條目的選擇指令時，根據(jù)所述選擇指令，生成顯示所述第一條目的所述美化選擇結果顯示層，其中，所述第一條目為所述美化下拉選項列表中的任一條目；

獲取按鈕點擊事件，生成與所述按鈕點擊事件對應的所述美化下拉圖標按鈕。

較佳的，所所述將所述觸發(fā)函數(shù)與第一列表點擊事件相互映射，生成美化下拉選項列表，包括：

復制未美化下拉選項列表的條目，得到所述美化下拉選項列表的條目；

獲取列表點擊事件，綁定所述列表點擊事件到所述美化下拉選項列表的條目；

將所述觸發(fā)函數(shù)嵌入所述第一列表點擊事件中，生成所述美化下拉選項列表。

本發(fā)明實施例提供了一種美化下拉選框的生成裝置，包括：

頁面布局搭建模塊，用于搭建頁面布局層疊樣式表CSS；

HTML層結構建立模塊，用于在所述頁面布局CSS的基礎上，通過超文本標記語言HTML建立層結構；

第一美化元素生成模塊，用于在所述層結構中，生成美化選擇結果顯示層及美化下拉圖標按鈕；

觸發(fā)函數(shù)獲取模塊，用于獲取HTML文檔對象模型DOM中對象的事件觸發(fā)器及所述事件觸發(fā)器對應的觸發(fā)函數(shù)，其中，所述事件觸發(fā)器包括：fireEvent事件或initEvent事件，所述觸發(fā)函數(shù)用于觸發(fā)所述事件觸發(fā)器；

第二美化元素生成模塊，用于在所述層結構中，將所述觸發(fā)函數(shù)與第一列表點擊事件相互映射，生成美化下拉選項列表，其中，所述第一列表點擊事件為所述美化下拉列表中與所述事件觸發(fā)器相對應的列表點擊事件。

較佳的，所述美化下拉選框的生成裝置還包括：

重復調(diào)用模塊，用于在重復調(diào)用美化下拉選框時，執(zhí)行對所述第一美化下拉選項列表的條目復制未美化下拉選項列表的條目，并重新生成所述美化下拉選框的綁定時間。

較佳的，所述觸發(fā)函數(shù)獲取模塊，包括：

事件獲取子模塊，用于獲取所述HTML DOM中Element對象的所有fireEvent事件或所有initEvent事件；

函數(shù)構建子模塊，用于根據(jù)所述所有fireEvent事件或所述所有initEvent事件，構建并獲取每個fireEvent事件的第一觸發(fā)函數(shù)或每個initEvent事件的第二觸發(fā)函數(shù)，其中，所述第一觸發(fā)函數(shù)用于觸發(fā)對應的fireEvent事件，所述第二觸發(fā)函數(shù)用于觸發(fā)對應的initEvent事件。

較佳的，所述頁面布局搭建模塊具體用于：

覆蓋所述美化下拉選框在未美化下拉選框上，搭建所述頁面布局CSS。

由上述的技術方案可見，在本發(fā)明實施例中，與列表點擊事件相互映射的為觸發(fā)函數(shù)，而不是綁定前端編碼，實現(xiàn)了美化下拉選項列表的列表點擊事件與前端編碼的分離。本發(fā)明實施例通過將觸發(fā)函數(shù)與美化下拉選項列表綁定的列表點擊事件相互映射，能夠直接修改觸發(fā)函數(shù)，可移植性較高，方便程序員后期的開發(fā)。當然，實施本發(fā)明的任一產(chǎn)品或方法必不一定需要同時達到以上所述的所有優(yōu)點。

附圖說明

為了更清楚地說明本發(fā)明實施例或現(xiàn)有技術中的技術方案，下面將對實施例或現(xiàn)有技術描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的一些實施例，對于本領域普通技術人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據(jù)這些附圖獲得其他的附圖。

圖1為本發(fā)明實施例的美化下拉選框的生成方法的一種流程示意圖；

圖2為本發(fā)明實施例的美化下拉選框覆蓋未美化下拉選框的示意圖；

圖3為本發(fā)明實施例的美化下拉選框的生成方法的另一種流程示意圖；

圖4為本發(fā)明實施例的美化下拉選框的生成裝置的示意圖；

圖5為本發(fā)明實施例的美化下拉選框與Firefox、Google Chrome、IE瀏覽器中初始的未美化下拉選框?qū)Ρ刃Ч疽鈭D。

具體實施方式

下面將結合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發(fā)明一部分實施例，而不是全部的實施例?；诒景l(fā)明中的實施例，本領域普通技術人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實施例，都屬于本發(fā)明保護的范圍。

如圖1所示，圖1為本發(fā)明實施例的美化下拉選框的生成方法的一種流程示意圖，包括：

步驟101，搭建頁面布局層疊樣式表CSS。

本發(fā)明實施例通過利用美化下拉選框覆蓋未美化下拉選框(也可以稱為原生<select>)的方法，實現(xiàn)美化下拉選框在瀏覽器上的應用。在美化下拉選框生成時，首先，搭建頁面布局CSS(Cascading Style Sheets，層疊樣式表)，使美化元素層疊在原生<select>層之上。

步驟102，在頁面布局CSS的基礎上，通過超文本標記語言HTML建立層結構。

根據(jù)頁面布局CSS，通過HTML(Hyper Text Markup Language，超文本標記語言)建立HTML層結構，HTML層結構中元素的表現(xiàn)形式由頁面布局CSS中的內(nèi)容控制。

步驟103，在層結構中，生成美化選擇結果顯示層及美化下拉圖標按鈕。

在HTML層結構中，動態(tài)生成美化選擇結果顯示層及美化下拉圖標按鈕。

步驟104，獲取HTML文檔對象模型DOM中對象的事件觸發(fā)器及事件觸發(fā)器對應的觸發(fā)函數(shù)。

其中，事件觸發(fā)器包括：fireEvent事件或initEvent事件，觸發(fā)函數(shù)用于觸發(fā)事件觸發(fā)器。

獲取HTML DOM(Document Object Model，文檔對象模型)中Element對象的事件觸發(fā)器，并掌握事件觸發(fā)器的使用方法，根據(jù)事件觸發(fā)器構建該事件觸發(fā)器的觸發(fā)函數(shù)。

步驟105，在層結構中，將觸發(fā)函數(shù)與第一列表點擊事件相互映射，生成美化下拉選項列表。

其中，第一列表點擊事件為美化下拉列表中與事件觸發(fā)器相對應的列表點擊事件。

事件觸發(fā)器與未美化下拉選項列表的條目具有對應關系，而美化下拉選項列表的條目，復制未美化下拉選項列表的條目得到，所以事件觸發(fā)器與美化下拉選項列表的條目具有對應關系。又因為觸發(fā)函數(shù)是根據(jù)事件觸發(fā)器構建的，而美化下拉選項列表的條目各自綁定著列表點擊事件，所以觸發(fā)函數(shù)與列表點擊事件有對應關系。

將觸發(fā)函數(shù)與第一列表點擊事件相互映射的方法包括：將觸發(fā)函數(shù)嵌入第一列表點擊事件內(nèi)或其他符合本發(fā)明實施例的映射方法。

將觸發(fā)函數(shù)與美化下拉選項列表的條目綁定的列表點擊事件相互映射，保證程序員對原生<select>操作代碼的執(zhí)行。

在本發(fā)明實施例中，與列表點擊事件相互映射的為觸發(fā)函數(shù)，而不是綁定前端編碼，實現(xiàn)了美化下拉選項列表的列表點擊事件與前端編碼的分離，方便程序員后期對美化下拉選框的開發(fā)，可移植性好。

優(yōu)選的，在本發(fā)明實施例的美化下拉選框的生成方法中，在HTML層結構中，將觸發(fā)函數(shù)與第一列表點擊事件相互映射之后，該方法還包括：

在重復調(diào)用美化下拉選框時，執(zhí)行對美化下拉選項列表的條目復制未美化下拉選項列表的條目，并重新生成美化下拉選框的綁定時間。

在web端二級聯(lián)動情況是經(jīng)常用到的，所以需要添加重復調(diào)用判斷，已初始化過的美化下拉選框，在重復調(diào)用時執(zhí)行對美化下拉選項列表條目復制原生<select>子選項<option>，重新生成美化下拉選項列表的條目，以及重新生成下拉選框時間綁定。添加重復調(diào)用判斷適用于二級聯(lián)動，AJAX(Asynchronous Javascript And XML，異步JavaScript和XML)重新調(diào)取原生<select>內(nèi)容的情況，或者在程序員動態(tài)改版原生<select>子選項時做一次調(diào)用。例如，初始時第一美化下拉選項列表的選中條目為福建省，相應的第二美化下拉選項列表的條目對應福建省的各個地級市，當?shù)谝幻阑吕x項列表的選中條目變更為廣東省時，執(zhí)行對第二美化下拉選項列表條目復制原生<select>子選項<option>，將第二美化下拉選項列表的條目更變?yōu)閺V東省的各個地級市?；虺跏紩r美化下拉選項列表的條目為福建省，程序員動態(tài)改版原生<select>子選項中的福建省為閩，則執(zhí)行對美化下拉選項列表條目復制原生<select>子選項<option>，將美化下拉選項列表的該條目變更為閩。

通過本發(fā)明實施例，添加重復調(diào)用判斷，考慮了二級聯(lián)動情況，拓展了本發(fā)明實施例的實用性。

優(yōu)選的，在本發(fā)明實施例的美化下拉選框的生成方法中，獲取文檔對象模型HTML DOM中對象的事件觸發(fā)器及事件觸發(fā)器對應的觸發(fā)函數(shù)，其步驟包括：

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

第二步，根據(jù)fireEvent事件或initEvent事件，構建并獲取每個fireEvent事件的第一觸發(fā)函數(shù)或每個initEvent事件的第二觸發(fā)函數(shù)。

其中，第一觸發(fā)函數(shù)用于觸發(fā)對應的fireEvent事件，第二觸發(fā)函數(shù)用于觸發(fā)對應的initEvent事件。

在美化下拉選框時，首先要獲取HTML DOM中Element對象的fireEvent事件或initEvent事件，并掌握fireEvent事件或initEvent事件的使用方法。根據(jù)fireEvent事件的使用方法分別構建每個fireEvent事件的第一觸發(fā)函數(shù)，或根據(jù)initEvent事件的使用方法分別構建每個initEvent事件的第二觸發(fā)函數(shù)。

通過本發(fā)明實施例的方法，構建每個fireEvent事件的第一觸發(fā)函數(shù)或每個initEvent事件的第二觸發(fā)函數(shù)，為后續(xù)嵌入第一觸發(fā)函數(shù)或第二觸發(fā)函數(shù)至列表點擊事件，以實現(xiàn)前端編碼的分離，提供了技術上的支持。

優(yōu)選的，在本發(fā)明實施例的美化下拉選框的生成方法中，搭建頁面布局層疊樣式表CSS，包括：

覆蓋美化下拉選框在未美化下拉選框上，搭建頁面布局CSS。

如圖2所示，圖2為本發(fā)明實施例的美化下拉選框覆蓋未美化下拉選框的示意圖。圖2中包括：原生<select>201，美化下拉圖標按鈕202，美化選擇結果顯示層203，美化下拉選項列表204和美化下拉選項列表的條目205。在美化下拉選框的生成過程中，利用美化下拉選框覆蓋原生<select>201的方法顯然要比直接修改原生<select>201的方法簡單的多。搭建頁面布局CSS(Cascading Style Sheets，層疊樣式表)，利用相對定位與絕對定位相互依賴的原理，和DIV(DIVision，層疊樣式表定位技術)層次設置，讓美化下拉選框疊在原生<select>201之上，覆蓋原生<select>201，達到美化下拉選框與原生<select>201共存但是只看到美化下拉選框的效果。

通過本發(fā)明實施例，在搭建頁面布局的過程中，利用美化下拉選框覆蓋未美化下拉選框，而不是直接修改未美化下拉選框，減少程序員的工作量，更加省時省力，同時美化下拉選框的呈現(xiàn)效果可在CSS樣式文件自主修改，不涉及復制邏輯。

優(yōu)選的，在本發(fā)明實施例的美化下拉選框的生成方法中，生成美化選擇結果顯示層及美化下拉圖標按鈕，其步驟包括：

第一步，在接收對美化下拉選項列表的條目中的第一條目的選擇指令時，根據(jù)選擇指令，生成顯示第一條目的美化選擇結果顯示層。

其中，第一條目為美化下拉選項列表中的任一條目。

第二步，獲取按鈕點擊事件，生成與按鈕點擊事件對應的美化下拉圖標按鈕。

在本發(fā)明實施例中，為了模擬原生<select>的實現(xiàn)過程，實現(xiàn)網(wǎng)頁的多元化展示，還要考慮美化下拉選框的生成效果，動態(tài)生成美化選擇結果顯示層及美化下拉圖標按鈕。生成美化選擇結果顯示層，當接收到美化下拉選項列表的條目選擇指令時，執(zhí)行將被選中的條目顯示到美化選擇結果顯示層中，同時相應的改變原生<select>子選項<option>的選中狀態(tài)。獲取按鈕點擊事件，給美化下拉圖標按鈕綁定按鈕點擊事件。在美化下拉選項列表的顯示效果為顯示時，若接收到美化下拉圖標按鈕選擇指令，執(zhí)行美化下拉選項列表的顯示效果由顯示變?yōu)殡[藏；在美化下拉選項列表的顯示效果為隱藏時，若接收到美化下拉圖標按鈕選擇指令，執(zhí)行美化下拉選項列表的顯示效果由隱藏變?yōu)轱@示。

通過本發(fā)明實施例，動態(tài)生成了美化選擇結果顯示層，有效的實現(xiàn)了被選中的條目的顯示，動態(tài)生成了美化下拉圖標按鈕，有效的實現(xiàn)了美化下拉選項列表的顯示或隱藏，有利于網(wǎng)頁的多元化展示。

優(yōu)選的，在本發(fā)明實施例的美化下拉選框的生成方法中，將觸發(fā)函數(shù)與第一列表點擊事件相互映射，生成美化下拉選項列表，其步驟包括：

第一步，復制未美化下拉選項列表的條目，得到美化下拉選項列表的條目。

第二步，獲取列表點擊事件，綁定列表點擊事件到美化下拉選項列表的條目。

第三步，將觸發(fā)函數(shù)嵌入第一列表點擊事件中，生成美化下拉選項列表。

其中，第一列表點擊事件為美化下拉列表中與事件觸發(fā)器相對應的列表點擊事件。

復制原生<select>子選項<option>得到美化下拉選項列表的條目，獲取列表點擊事件，綁定列表點擊事件到下拉選項列表的條目，獲取觸發(fā)函數(shù)，并將觸發(fā)函數(shù)嵌入到對應的列表點擊事件中。

事件觸發(fā)器與原生<select>子選項<option>具有對應關系，而美化下拉選項列表的條目，復制原生<select>子選項<option>得到，所以事件觸發(fā)器與美化下拉選項列表的條目具有對應關系。又因為觸發(fā)函數(shù)是根據(jù)事件觸發(fā)器構建的，而美化下拉選項列表的條目各自綁定著列表點擊事件，所以觸發(fā)函數(shù)與列表點擊事件有對應關系。

通過本發(fā)明實施例，動態(tài)生成了美化下拉選項列表，將觸發(fā)函數(shù)嵌入對應的列表點擊事件中，實現(xiàn)了美化下拉選項列表的列表點擊事件與前端編碼的分離，方便程序員后期對美化下拉選框的開發(fā)，有利于網(wǎng)頁的多元化展示。

圖3為本發(fā)明實施例的美化下拉選框的生成方法的另一種流程示意圖，其步驟包括：

步驟301，搭建頁面布局CSS，利用相對定位與絕對定位相互依賴的原理，和DIV層次設置，讓美化下拉選框疊在未美化下拉選框(原生<select>之上)，覆蓋原生<select>，達到美化下拉選框與原生<select>共存但只看到美化下拉選框的效果。

步驟302，在步驟301的基礎上搭建HTML層結構。

步驟303，構建JS(Java Script)代碼，動態(tài)生成美化下拉選框。

其中，美化下拉選框至少包括：美化選擇結果顯示層、美化下拉圖標按鈕和美化下拉選項列表，美化下拉選項列表的條目復制原生<select>子選項<option>得到。

步驟304，綁定列表點擊事件到美化下拉選項列表的條目。

其中，當接收到美化下拉選項列表的條目的選定指令時，顯示被選擇的條目至美化選擇結果顯示層中，并相應的改變原生<select>子選項<option>的選中狀態(tài)。

步驟305，獲取HTML DOM中Element對象的fireEvent事件或initEvent事件，并掌握該fireEvent事件或initEvent事件的使用方法。

步驟306，構建并獲取每個fireEvent事件的第一觸發(fā)函數(shù)或每個initEvent事件的第二觸發(fā)函數(shù)，并將第一觸發(fā)函數(shù)或第二觸發(fā)函數(shù)嵌入在美化下拉選項列表點擊事件內(nèi)，以保證程序員對原生<select>操作代碼的執(zhí)行。

其中，第一觸發(fā)函數(shù)用于觸發(fā)對應的fireEvent事件，第二觸發(fā)函數(shù)用于觸發(fā)對應的initEvent事件。

步驟307，綁定按鈕點擊事件到美化下拉圖標按鈕，用于動態(tài)切換美化下拉選項列表的顯示和隱藏。

步驟308，添加重復調(diào)用判斷，對于已初始化過的下拉選框，在重復調(diào)用時執(zhí)行對下拉選項列表條目復制原生<select>元素子選項<option>，以及重新生成下拉選框時間綁定。

在美化下拉選框的生成過程中，首先，編寫CSS文件。

本發(fā)明實施例通過利用美化下拉選框覆蓋原生<select>的方法，實現(xiàn)美化下拉選框的生成。搭建頁面布局CSS，利用相對定位與絕對定位相互依賴的原理，和DIV層次設置，讓美化下拉選框疊在原生<select>之上，覆蓋原生<select>，達到美化下拉選框與原生<select>共存但是只看到美化下拉選框的效果。

然后，編寫HTML文件。

根據(jù)頁面布局CSS，搭建HTML層結構，其中，HTML層結構內(nèi)元素的表現(xiàn)形式由CSS文件控制。

最后，編寫JS腳本。

動態(tài)生成美化下拉選框。復制原生<select>子選項<option>得到美化下拉選項列表的條目，獲取列表點擊事件，綁定列表點擊事件到美化下拉選項列表的條目，當用戶選擇美化下拉選項列表的任一條目時，被選中的條目會動態(tài)的顯示到美化選擇結果顯示層中，同時相應的改變原生<select>子選項<option>的選中狀態(tài)。獲取按鈕點擊事件，綁定列表點擊事件到美化下拉圖標按鈕，當用戶點擊美化下拉圖標按鈕時，可以實現(xiàn)美化下拉選項列表的顯示效果在顯示和隱藏之間切換。

為了實現(xiàn)下拉選項列表點擊事件與前端編碼的分離，本發(fā)明實施例采用嵌入觸發(fā)函數(shù)的方法，給列表點擊事件嵌入第一觸發(fā)函數(shù)或第二觸發(fā)函數(shù)。獲取HTML DOM中Element對象的所有fireEvent事件或所有initEvent事件，并掌握fireEvent事件或initEvent事件的使用方法。根據(jù)掌握的HTML DOM中Element對象的fireEvent事件或initEvent事件的使用方法，構建fireEvent事件的第一觸發(fā)函數(shù)或initEvent事件的第二觸發(fā)函數(shù)，然后將第一觸發(fā)函數(shù)或第二觸發(fā)函數(shù)嵌入到下拉選項列表的條目綁定的列表點擊事件內(nèi)，以保證程序員對原生<select>操作代碼的執(zhí)行。

此外，還可以在通告中添加重復調(diào)用判斷。

在web端二級聯(lián)動情況是經(jīng)常用到的，所以需要添加重復調(diào)用判斷，已初始化過的美化下拉選框，在重復調(diào)用時執(zhí)行對下拉選項列表條目復制原生<select>子選項<option>，以及重新生成下拉選框時間綁定。添加重復調(diào)用判斷適用于二級聯(lián)動，AJAX重新調(diào)取原生<select>內(nèi)容的情況，或者在程序員動態(tài)改版原生<select>子選項時做一次調(diào)用。

通過將觸發(fā)函數(shù)與美化下拉選項列表綁定的列表點擊事件相互映射，方便程序員后期對美化下拉選框的開發(fā)，可移植性好。與列表點擊事件相互映射的為觸發(fā)函數(shù)，而不是綁定前端編碼，實現(xiàn)了美化下拉選項列表的列表點擊事件與前端編碼的分離，方便后期程序員嵌入后端代碼，這種分離程序員邏輯的美化下拉選框的JS(Java Script)腳本具有可移植性和通用性，并且不用重復美化代碼，代碼冗余度低，下拉選框的呈現(xiàn)效果可在CSS樣式文件自主修改，不涉及復制邏輯。

圖4為本發(fā)明實施例的美化下拉選框的生成裝置的示意圖，包括：

頁面布局搭建模塊401，用于搭建頁面布局層疊樣式表CSS。

HTML層結構建立模塊402，用于在頁面布局CSS的基礎上，通過超文本標記語言HTML建立層結構。

第一美化元素生成模塊403，用于在層結構中，生成美化選擇結果顯示層及美化下拉圖標按鈕。

觸發(fā)函數(shù)獲取模塊404，用于獲取HTML文檔對象模型DOM中對象的事件觸發(fā)器及事件觸發(fā)器對應的觸發(fā)函數(shù)。

其中，事件觸發(fā)器包括：fireEvent事件或initEvent事件，觸發(fā)函數(shù)用于觸發(fā)事件觸發(fā)器。

第二美化元素生成模塊405，用于在層結構中，將觸發(fā)函數(shù)與第一列表點擊事件相互映射，生成美化下拉選項列表。

其中，第一列表點擊事件為美化下拉列表中與事件觸發(fā)器相對應的列表點擊事件。

在本發(fā)明實施例中，與列表點擊事件相互映射的為觸發(fā)函數(shù)，而不是綁定前端編碼，實現(xiàn)了美化下拉選項列表的列表點擊事件與前端編碼的分離，方便程序員后期對美化下拉選框的開發(fā)，可移植性好。

需要說明的是，本發(fā)明實施例的裝置是應用上述美化下拉選框的生成方法的裝置，則上述美化下拉選框的生成方法的所有實施例均適用于該裝置，且均能達到相同或相似的有益效果。

優(yōu)選的，本發(fā)明實施例的美化下拉選框的生成裝置還包括：

重復調(diào)用模塊，用于在重復調(diào)用美化下拉選框時，執(zhí)行對第一美化下拉選項列表的條目復制未美化下拉選項列表的條目，并重新生成美化下拉選框的綁定時間。

通過本發(fā)明實施例，添加重復調(diào)用判斷，考慮了二級聯(lián)動情況，拓展了本發(fā)明實施例的實用性。

優(yōu)選的，在本發(fā)明實施例的美化下拉選框的生成裝置中，觸發(fā)函數(shù)獲取模塊404，包括：

事件獲取子模塊，用于獲取HTML DOM中Element對象的所有fireEvent事件或所有initEvent事件。

函數(shù)構建子模塊，用于根據(jù)fireEvent事件或initEvent事件，構建并獲取每個fireEvent事件的第一觸發(fā)函數(shù)或每個initEvent事件的第二觸發(fā)函數(shù)，其中，第一觸發(fā)函數(shù)用于觸發(fā)對應的fireEvent事件，第二觸發(fā)函數(shù)用于觸發(fā)對應的initEvent事件。

通過本發(fā)明實施例的裝置，構建每個fireEvent事件的第一觸發(fā)函數(shù)或每個initEvent事件的第二觸發(fā)函數(shù)，為后續(xù)嵌入第一觸發(fā)函數(shù)或第二觸發(fā)函數(shù)至列表點擊事件，以實現(xiàn)前端編碼的分離，提供了技術上的支持。

優(yōu)選的，在本發(fā)明實施例的美化下拉選框的生成裝置中，頁面布局搭建模塊401具體用于：

覆蓋美化下拉選框在未美化下拉選框上，搭建頁面布局CSS。

通過本發(fā)明實施例，在搭建頁面布局的過程中，利用美化下拉選框覆蓋未美化下拉選框，而不是直接修改未美化下拉選框，減少程序員的工作量，更加省時省力。

優(yōu)選的，在本發(fā)明實施例的美化下拉選框的生成裝置中，第一美化元素生成模塊403，包括：

選擇結果顯示層生成子模塊，用于在接收對美化下拉選項列表的條目中的第一條目的選擇指令時，根據(jù)選擇指令，生成顯示第一條目的美化選擇結果顯示層。

其中，第一條目為美化下拉選項列表中的任一條目。

下拉圖標按鈕生成子模塊，用于獲取按鈕點擊事件，生成與按鈕點擊事件對應的美化下拉圖標按鈕。

通過本發(fā)明實施例，動態(tài)生成了美化選擇結果顯示層，有效的實現(xiàn)了被選中的條目的顯示，動態(tài)生成了美化下拉圖標按鈕，有效的實現(xiàn)了美化下拉選項列表的顯示或隱藏，有利于網(wǎng)頁的多元化展示。

優(yōu)選的，在本發(fā)明實施例的美化下拉選框的生成裝置中，第二美化元素生成模塊405，包括：

條目生成子模塊，用于復制未美化下拉選項列表的條目，得到美化下拉選項列表的條目。

條目綁定子模塊，用于獲取列表點擊事件，綁定列表點擊事件到美化下拉選項列表的條目。

下拉選項列表生成子模塊，用于將觸發(fā)函數(shù)嵌入第一列表點擊事件中，生成美化下拉選項列表。

通過本發(fā)明實施例，動態(tài)生成了美化下拉選項列表，將觸發(fā)函數(shù)嵌入對應的列表點擊事件中，實現(xiàn)了美化下拉選項列表的列表點擊事件與前端編碼的分離，方便程序員后期對美化下拉選框的開發(fā)，有利于網(wǎng)頁的多元化展示。

通過本發(fā)明實施例，動態(tài)生成了美化下拉選框，有效的實現(xiàn)了美化下拉選項列表的顯示或隱藏，有利于網(wǎng)頁的多元化展示。

參見圖5，圖5為本發(fā)明實施例的美化下拉選框與Firefox、Google Chrome、IE瀏覽器中初始的未美化下拉選框?qū)Ρ刃Ч疽鈭D。圖5包括：Firefox瀏覽器的未美化下拉選框501，Google Chrome瀏覽器的未美化下拉選框502，IE瀏覽器的未美化下拉選框503和本發(fā)明實施例的美化下拉選框504。通過對比可以得出，美化下拉選框的視覺效果明顯優(yōu)于Firefox、Google Chrome、IE瀏覽器中初始的未美化下拉選框的視覺效果。

通過本發(fā)明實施例可以得出，本發(fā)明的美化下拉選框的生成方法及裝置，能夠增強美化下拉選框的視覺效果，提升用戶體驗，讓用戶產(chǎn)生視覺上的愉悅感。

需要說明的是，在本文中，諸如第一和第二等之類的關系術語僅僅用來將一個實體或者操作與另一個實體或操作區(qū)分開來，而不一定要求或者暗示這些實體或操作之間存在任何這種實際的關系或者順序。而且，術語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、物品或者設備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、物品或者設備所固有的要素。在沒有更多限制的情況下，由語句“包括一個……”限定的要素，并不排除在包括要素的過程、方法、物品或者設備中還存在另外的相同要素。

本說明書中的各個實施例均采用相關的方式描述，各個實施例之間相同相似的部分互相參見即可，每個實施例重點說明的都是與其他實施例的不同之處。尤其，對于系統(tǒng)實施例而言，由于其基本相似于方法實施例，所以描述的比較簡單，相關之處參見方法實施例的部分說明即可。

以上僅為本發(fā)明的較佳實施例而已，并非用于限定本發(fā)明的保護范圍。凡在本發(fā)明的精神和原則之內(nèi)所作的任何修改、等同替換、改進等，均包含在本發(fā)明的保護范圍內(nèi)。