一種實(shí)現(xiàn)可多選下拉列表框的方法
【專利摘要】本發(fā)明涉及軟件技術(shù)開發(fā)【技術(shù)領(lǐng)域】，具體涉及一種實(shí)現(xiàn)可多選下拉列表框的方法。本發(fā)明通過<input>與<div>標(biāo)簽組合來實(shí)現(xiàn)下拉框的多選功能。本發(fā)明有效解決了現(xiàn)有下拉框多選方式要將全部或大部分選項(xiàng)顯示出來，占用大量的頁面布局空間、影響頁面整體效果的問題；可以用于下拉列表框的多選實(shí)現(xiàn)上。
【專利說明】一種實(shí)現(xiàn)可多選下拉列表框的方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及軟件技術(shù)開發(fā)【技術(shù)領(lǐng)域】，具體涉及一種實(shí)現(xiàn)可多選下拉列表框的方法。
【背景技術(shù)】
[0002]目前的業(yè)務(wù)系統(tǒng)不但越來越復(fù)雜而且用戶體驗(yàn)要求也越來越高，如:用戶在操作某個下拉框時，有可能會選擇某些(不止一項(xiàng))選項(xiàng)，通常的下拉框是由〈select〉標(biāo)簽的multiple屬性來實(shí)現(xiàn)，由于這種方式要將全部或大部分選項(xiàng)顯示出來，不僅占用了大量的頁面布局空間，而且還影響頁面整體效果。
【發(fā)明內(nèi)容】
[0003]本發(fā)明解決的技術(shù)問題在于提供一種實(shí)現(xiàn)可多選下拉列表框的方法，解決下拉表框占用大量頁面布局空間的問題。
[0004]本發(fā)明解決上述問題的技術(shù)方案是:
[0005]通過〈input〉與<div>標(biāo)簽組合來實(shí)現(xiàn)下拉框的多選功能。
[0006]包括以下步驟:
[0007]第I步、定義一個〈input〉標(biāo)簽同時設(shè)置id與name屬性；
[0008]第2步、定義一個<div>標(biāo)簽同時設(shè)置id屬性，并初始化所有選項(xiàng)值；
[0009]第3步、定義一個隱藏的〈input〉標(biāo)同時設(shè)置id與name屬性；
[0010]第4步、在頁面加載時,利用EasyUI將〈input〉標(biāo)簽初始化為combo控件,并設(shè)置其屬性 multiple:true ；
[0011]第5步、將<div>標(biāo)簽附加到combo的panel內(nèi)，然后給<div>內(nèi)的多選框元素綁定選中事件；
[0012]第6步、用戶勾選checkbox選項(xiàng)框時觸發(fā)選中事件將已選擇的值存放到隱藏的〈input〉內(nèi)，在輸入框內(nèi)顯示用戶所選的值。
[0013]本發(fā)明的有益效果是:通過常用的HTML標(biāo)簽組織來實(shí)現(xiàn)多選功能，用戶可以根據(jù)需要隨意選擇，操作簡單方便，結(jié)構(gòu)簡潔明了，不影響原有的頁面布局，有效增強(qiáng)了用戶體驗(yàn)度。
【專利附圖】
【附圖說明】
[0014]下面結(jié)合附圖對本發(fā)明進(jìn)一步說明:
[0015]圖1是本發(fā)明流程圖；
[0016]圖2是本發(fā)明的實(shí)際效果圖。
【具體實(shí)施方式】
[0017]如圖1、2所示，本發(fā)明通過將HTML的常用標(biāo)簽〈inputXdiv〉組合實(shí)現(xiàn)下拉框的多選，具體步驟如下:
[0018]第I步、定義一個〈input〉標(biāo)簽同時設(shè)置id與name屬性；
[0019]第2步、定義一個<div>標(biāo)簽同時設(shè)置id屬性，并初始化所有選項(xiàng)值；
[0020]第3步、定義一個隱藏的〈input〉標(biāo)同時設(shè)置id與name屬性；
[0021]第4步、在頁面加載時,利用EasyUI將〈input〉標(biāo)簽初始化為combo控件,并設(shè)置其屬性 multiple:true ；
[0022]第5步、將<div>標(biāo)簽附加到combo的panel內(nèi)，然后給<div>內(nèi)的checkbox多選框元素綁定選中事件；
[0023]第6步、用戶勾選checkbox選項(xiàng)框時觸發(fā)選中事件將已選擇的值存放到隱藏的〈input〉內(nèi)，在輸入框內(nèi)顯示用戶所選的值。
【權(quán)利要求】
1.一種實(shí)現(xiàn)可多選的下拉列表框的方法，其特征在于:通過〈input〉與<div>標(biāo)簽組合來實(shí)現(xiàn)下拉框的多選功能。
2.根據(jù)權(quán)利要求1所述的實(shí)現(xiàn)可多選的下拉列表框的方法，其特征在于:包括以下步驟: 第I步、定義一個〈input〉標(biāo)簽同時設(shè)置id與name屬性； 第2步、定義一個<div>標(biāo)簽同時設(shè)置id屬性，并初始化所有選項(xiàng)值； 第3步、定義一個隱藏的〈input〉標(biāo)同時設(shè)置id與name屬性； 第4步、在頁面加載時,利用EasyUI將〈input〉標(biāo)簽初始化為combo控件,并設(shè)置其屬性 multiple:true ； 第5步、將<div>標(biāo)簽附加到combo的panel內(nèi)，然后給<div>內(nèi)的多選框元素綁定選中事件； 第6步、用戶勾選checkbox選項(xiàng)框時觸發(fā)選中事件將已選擇的值存放到隱藏的〈input〉內(nèi)，在輸入框內(nèi)顯示用戶所選的值。
【文檔編號】G06F9/44GK104391693SQ201410636261
【公開日】2015年3月4日 申請日期:2014年11月12日 優(yōu)先權(quán)日:2014年11月12日
【發(fā)明者】齊兆勇, 徐震宇, 孫傲冰, 季統(tǒng)凱 申請人:國云科技股份有限公司