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

背景技術(shù)：

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

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

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

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

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

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

在所述頁面布局CSS的基礎(chǔ)上，通過超文本標(biāo)記語言HTML建立層結(jié)構(gòu)；

在所述層結(jié)構(gòu)中，生成美化選擇結(jié)果顯示層及美化下拉圖標(biāo)按鈕；

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

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

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

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

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

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

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

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

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

較佳的，所述生成美化選擇結(jié)果顯示層及美化下拉圖標(biāo)按鈕，包括：

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

獲取按鈕點擊事件，生成與所述按鈕點擊事件對應(yīng)的所述美化下拉圖標(biāo)按鈕。

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

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

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

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

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

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

HTML層結(jié)構(gòu)建立模塊，用于在所述頁面布局CSS的基礎(chǔ)上，通過超文本標(biāo)記語言HTML建立層結(jié)構(gòu)；

第一美化元素生成模塊，用于在所述層結(jié)構(gòu)中，生成美化選擇結(jié)果顯示層及美化下拉圖標(biāo)按鈕；

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

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

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

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

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

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

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

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

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

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

附圖說明

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

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

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

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

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

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

具體實施方式

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

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

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

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

步驟102，在頁面布局CSS的基礎(chǔ)上，通過超文本標(biāo)記語言HTML建立層結(jié)構(gòu)。

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

步驟103，在層結(jié)構(gòu)中，生成美化選擇結(jié)果顯示層及美化下拉圖標(biāo)按鈕。

在HTML層結(jié)構(gòu)中，動態(tài)生成美化選擇結(jié)果顯示層及美化下拉圖標(biāo)按鈕。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第二步，獲取按鈕點擊事件，生成與按鈕點擊事件對應(yīng)的美化下拉圖標(biāo)按鈕。

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

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

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

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

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

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

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

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

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

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

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

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

步驟302，在步驟301的基礎(chǔ)上搭建HTML層結(jié)構(gòu)。

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

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

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

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

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

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

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

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

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

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

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

然后，編寫HTML文件。

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

最后，編寫JS腳本。

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

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

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

在web端二級聯(lián)動情況是經(jīng)常用到的，所以需要添加重復(fù)調(diào)用判斷，已初始化過的美化下拉選框，在重復(fù)調(diào)用時執(zhí)行對下拉選項列表條目復(fù)制原生<select>子選項<option>，以及重新生成下拉選框時間綁定。添加重復(fù)調(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)腳本具有可移植性和通用性，并且不用重復(fù)美化代碼，代碼冗余度低，下拉選框的呈現(xiàn)效果可在CSS樣式文件自主修改，不涉及復(fù)制邏輯。

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

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

HTML層結(jié)構(gòu)建立模塊402，用于在頁面布局CSS的基礎(chǔ)上，通過超文本標(biāo)記語言HTML建立層結(jié)構(gòu)。

第一美化元素生成模塊403，用于在層結(jié)構(gòu)中，生成美化選擇結(jié)果顯示層及美化下拉圖標(biāo)按鈕。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下拉圖標(biāo)按鈕生成子模塊，用于獲取按鈕點擊事件，生成與按鈕點擊事件對應(yīng)的美化下拉圖標(biāo)按鈕。

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

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

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

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

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

通過本發(fā)明實施例，動態(tài)生成了美化下拉選項列表，將觸發(fā)函數(shù)嵌入對應(yīng)的列表點擊事件中，實現(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ā)明的美化下拉選框的生成方法及裝置，能夠增強(qiáng)美化下拉選框的視覺效果，提升用戶體驗，讓用戶產(chǎn)生視覺上的愉悅感。

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

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

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