jQuery自定義多選下拉框

專案中需要自定義乙個下拉框多選外掛程式，業務問題還是自己實現比較好

通過$.fn 向jquery新增新的方法

下拉資料通過引數傳遞進去，通過呼叫該外掛程式時接收，選擇後的確定與取消事件採用事件傳遞方式

**如下：

1.效果圖

="請選擇"

readonly

="readonly"

5div

div

class

="dropdown-panel"

div

class

="dropdown-search"

span

input

type

="text"

class

="iptsearch"

placeholder

="關鍵字搜尋"

10div

11<

ul class

="dd-select"

1213

ul>

14<

div

class

="dropdown-opt"

15<

button

class

="dd-btn ok"

>確定

button

16<

button

class

="dd-btn cancel"

>取消

button

17div

18div

19div

.dropdown-container910

.dropdown-display

19.dropdown-display span

28.dropdown-display input[class='iptdiplay']

45.dropdown-panel

5556

.dropdown-panel .dropdown-search

61.dropdown-search span

70.dropdown-search input[class='iptsearch']

84.dropdown-panel .dd-select

98.dd-item

108.dd-item .dd-v

113.dd-item .dd-k

117.dd-item:first-child

120.dd-item:last-child

123.dd-select .on

126.dd-item:hover::before,.dd-item:hover before

137.dd-select .on::before,.dd-select .on before

148.dd-item:hover

152.dropdown-container .dropdown-opt

164.dropdown-container .dd-btn

176.dropdown-container .dd-btn:hover

180/*

scrollbar

*/181

.dropdown-container ::-webkit-scrollbar

182.dropdown-container ::-webkit-scrollbar-track,

183.dropdown-container ::-webkit-scrollbar-thumb

184.dropdown-container ::-webkit-scrollbar-track

185.dropdown-container ::-webkit-scrollbar-thumb

186.dropdown-container ::-webkit-scrollbar-corner

3.jquery外掛程式

;(function
($,window,document,undefined) ;
var parm=;
//es5 filter hack
if (!array.prototype.filter)
} return
res;};}
if(!array.prototype.indexof) 
else
if (this[i] == elem && startfrom >i) 
}return -1;}}
var init = function
(o,opts,okfn,cancelfn) }}';
}_panel.find('.dd-item').click(function
(e));
$this.removeclass('on');
}else
var disarr=;
for(var i=0,len=items.length;i)
$(".iptdiplay").val(disarr.join('|'));
});};
//init to build dropdown items
createdropitems(opts.items||);
function
toggledrop();
//search
$(".iptsearch").bind("input propertychange",function
(e)),parm);
});//toggle dropdown
$(".dropdown-display").click(function
());
//ok button event
$(".dropdown-opt button.ok").click(function
());
//cancel button event
$(".dropdown-opt button.cancel").click(function
());
};$.fn[_pluginname] = function
(options,okfn,cancelfn) );
}})(jquery,window,document);

4.頁面呼叫示例

5.輸出

6.不足

頁面樣式在不支援css3瀏覽器中顯示有問題後期需要改進

下拉資料為一次性渲染如有需要可設定滾動載入

下拉框滾動條的美化未相容所有瀏覽器

搜尋時檢索資料直接源自頁面資料所有需要新增延遲處理獲取服務端資料

【原創】

力軟下拉框多選 jquery實現下拉框多選

一說明本文是利用easyui實現下拉框多選功能，在comboxtree其原有的基礎上對樣式進行了改進，樣式表已上傳demo，如下二利用easyui實現多選下拉框 function url tree data2.json 資料來源 oncheck function node,checked 讓...

力軟下拉框多選 jquery實現下拉框多選方法介紹

jqGrid之自定義下拉框

目的使用者表中的負責人，做成下拉框模式，下拉框的選項為負責人中的資料。1.首先js獲取負責人資料陣列格式 var g ary var g fpid null function sys listbackuserajaxpcfor success function data 設定下拉選項 forma...

jQuery自定義多選下拉框

力軟下拉框多選 jquery實現下拉框多選

力軟下拉框多選 jquery實現下拉框多選方法介紹

jqGrid之自定義下拉框

相關推薦